`max-width` 或 `max-device-width：我应该使用哪种媒体查询进行响应式设计？

我应该使用 max-device-width 还是 max-width？

TL;DR

对于响应式网站，最好在媒体查询中使用 min-width/max-width 而不是 min-device-width/max-device-width 来定位更广泛的屏幕

说明

2018 年媒体查询第 4 级规范草案中已弃用设备宽度媒体功能。他们考虑的是设备的实际屏幕尺寸而不是浏览器视口，这可能会导致响应行为不一致。

为什么使用 max-width 与 max-device-width？

• max-width 以视口大小为目标，确保跨设备和浏览器窗口的响应能力尺寸。
• max-device-width 以设备的物理屏幕尺寸为目标，限制调整浏览器窗口大小时的响应能力。

其他注意事项

• 使用视口元标记 () 来控制浏览器视口缩放。
• 考虑设备特定的媒体功能（例如触摸操作）以获得更好的触摸屏体验。

进一步阅读

• [Quirksmode.org - 像素不是像素不是像素](https://www.quirksmode.org/mobile/prefsizes.html)
• [W3 - 媒体查询级别 4 规范](https://www.w3.org/TR /mediaqueries-4/#device-width)
• [Google 开发人员 - 网络基础知识 - Viewport](https://developers.google.com/web/fundamentals/design-and-ui/responsive-design/viewport)
• [Google 开发人员 - 网络基础知识 - 响应式 CSS 媒体查询](https://developers.google.com/web/fundamentals/design-and-ui/responsive-design/css-media-queries)
• [MDN - 使用视口元标记来控制布局在移动浏览器上](https://developer.mozilla.org/en-US/docs/Glossary/Viewport)

以上是`max-width` 或 `max-device-width：我应该使用哪种媒体查询进行响应式设计？的详细内容。更多信息请关注PHP中文网其他相关文章！