如何为不同的屏幕尺寸编写有效的 CSS 媒体查询？

屏幕尺寸的 CSS 媒体查询：综合指南

开发无缝适应不同屏幕尺寸的布局是现代响应式设计的基石。要掌握这项技术，理解并有效利用 CSS 媒体查询至关重要。

定义屏幕尺寸

在此场景中，列出了目标屏幕尺寸如：

• 640x480
• 800x600
• 1024x768
• 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中文网其他相关文章！