我应该使用 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中文网其他相关文章！
