如何為不同的螢幕尺寸撰寫有效的 CSS 媒體查詢？

螢幕尺寸的 CSS 媒體查詢：綜合指南

開發無縫適應不同螢幕尺寸的佈局是現代響應式設計的基石。要掌握這項技術，理解並有效利用 CSS 媒體查詢至關重要。

定義屏幕尺寸

在此場景中，列出了目標屏幕尺寸如：

• 640x480
• 800x600
• 102 4x768
• 1280x1024（及更大）

寫作有效的媒體查詢

要創建根據窗口寬度調整媒體查詢。儘管提供的程式碼範例包含媒體查詢，但它們的配置不正確。修復方法如下：

修訂後的媒體查詢：

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width: 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  /* Styles */
}

其他資源：

• 來源： http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• 回應值： https://zellwk.com/blog/media-query-units/

結論：

利用適當的媒體查詢，設計師可以創建響應式佈局輕鬆適應各種螢幕尺寸，確保跨多種裝置的最佳使用者體驗。

以上是如何為不同的螢幕尺寸撰寫有效的 CSS 媒體查詢？的詳細內容。更多資訊請關注PHP中文網其他相關文章！