如何為特定螢幕尺寸建立 CSS 媒體查詢？

了解響應式佈局的CSS 媒體查詢

問題：

創建一個適應各種螢幕的網站尺寸可能是一個挑戰。開發人員經常在實現 CSS 媒體查詢來實現這種回應能力方面遇到困難。

問題：

開發人員正在尋求協助來建立 CSS媒體查詢以實現佈局相容出現以下螢幕尺寸：

• 640x480
• 800x600
• 1024x768
• 1024x768

12801更大）

答案：

特定螢幕尺寸的媒體查詢：

@media screen and (max-width: 640px) {
  /* Styles for screens up to 640px wide */
}

@media screen and (max-width: 800px) {
  /* Styles for screens up to 800px wide */
}

@media screen and (max-width: 1024px) {
  /* Styles for screens up to 1024px wide */
}

@media screen and (min-width: 1280px) {
  /* Styles for screens 1280px wide and larger */
}

要為這些特定螢幕尺寸的媒體查詢：

要為這些特定螢幕尺寸建立媒體查詢，請使用以下語法：

• 額外注意事項：

使用 em 值而不是像素以獲得更好的反應能力。

考慮使用特定於裝置的媒體查詢（例如，用於 iPhone、iPad）以獲得最佳裝置相容性。

請參閱標準裝置媒體查詢的完整清單：http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

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

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

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

/* Laptops and desktops ----------- */
@media screen and (min-width : 1224px) {
  /* Styles */
}

用法範例：

以上是如何為特定螢幕尺寸建立 CSS 媒體查詢？的詳細內容。更多資訊請關注PHP中文網其他相關文章！