max-width和max-device-width使用哪一个
来源：3-2 作业题
亚麻桑
2022-02-16 18:31:02
为了解决移动端适配问题，我引入了之前跟老师学的flexible.js，但也导致了媒体查询出现了问题。
我的手机屏宽只有360px，dpr是3，页面缩放后宽度为1080px。按照媒体查询的筛选，它会展示ipad屏宽下的页面，而不是预想的ipone6屏宽下的页面，感觉不合理……
@ (max-width: 375px){……} // ipone6屏宽下的样式后来查询资料，改为使用max-device-width，问题解决。
@ (max-device-width: 375px){……}1、max-width和max-device-width，该使用哪个合适呢？
2、响应式布局和移动端适配，可否同时使用？
写回答
1回答
-
同学你好，解答如下：
1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。而max-width是目标显示区域的宽度，例如，浏览器宽度。通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。
2、移动端适配一般是为了在不同尺寸的屏幕下网页显示效果几乎一样。而响应式布局一般是为了在不同尺寸的屏幕下网页显示不同的效果。这俩虽然都是为了解决移动端适配问题，但是方向不一样，需要根据实际情况来选择使用哪一种。通常一起使用的情况比较少，但是也可以一起使用，不过使用响应式布局时建议单位最好用rem。
祝学习愉快！
0
相似问题
为什么真机测试和浏览器测试结果不一样
回答 1