我应该使用max-device-width还是max-width？-Java 学习之路

使用CSS媒体查询，您可以使用 max-device-width 来定位设备宽度（例如iPhone或Android设备）和/或以页面宽度为目标的 max-width .

如果您使用 max-device-width ，当您更改桌面上浏览器窗口的大小时，CSS会更改't change, because your desktop doesn' t更改大小 .

如果您使用 max-width ，当您更改桌面上浏览器窗口的大小时，您可能会看到面向移动的样式，例如触摸友好元素和菜单等等 .

现在不推荐使用针对特定浏览器（和设备？），您应该对目标设置更加不可知 . 这也适用于媒体查询吗？

Why would you target one over the other? Which one is the recommended one?

这是我在生产环境网站上使用的媒体查询示例：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

我倾向于同时使用 max-device-width 和 max-width .

3 回答

7
TL; DR

如果您正在制作一个响应式网站，您可能希望使用 min-width / max-width 而不是 min-device-width / max-device-width 来定位更广泛的屏幕尺寸 .

请记住在文档的 <head> 部分指定viewport meta tag：
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
解释

由于给定设备可以具有所有不同的可能屏幕分辨率和像素密度，因为有几件事需要考虑（缩放，像素密度，屏幕分辨率和尺寸，设备方向，宽高比等等） . 在这种情况下，像素实际上被称为"optical reference unit"而不是物理硬件像素 .

幸运的是，您可以在文档的 <head> 部分指定viewport meta tag，以便控制浏览器视口的宽度和缩放比例 . 如果此标记的 content 值为 width=device-width ，则屏幕的宽度将为match the device independent pixels，并确保所有不同的设备都应该缩放并且行为一致 .
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
在媒体查询方面，您可能希望使用 max-width 而不是 max-device-width ，因为 max-width 将定位视口（当前浏览器窗口），而 max-device-width 将定位设备的实际全屏大小/分辨率 .

换句话说，如果您使用 max-device-width ，则在调整桌面浏览器大小时不会看到应用不同的媒体查询，因为与 max-width 不同，仅考虑设备的实际全屏大小;不是浏览器窗口的当前大小 .

如果您在调整浏览器大小时响应，则会产生巨大差异 . 此外，如果您正在使用 max-device-width ，那么您用于定位具有较小屏幕的设备的媒体查询将不适用于桌面，即使将浏览器窗口调整大小以匹配所述较小的屏幕尺寸也是如此 .

这article on Google Developers强烈反对使用 max-device-width ：

Google Developers - Web Fundamentals - 响应式CSS媒体查询也可以基于* -device-width创建查询;虽然这种做法非常气馁 . 差异很微妙但非常重要：min-width基于浏览器窗口的大小，而min-device-width基于屏幕的大小 . 遗憾的是，某些浏览器（包括旧版Android浏览器）可能无法正确报告设备宽度，而是以设备像素而不是预期的视口宽度报告屏幕大小 . 此外，使用* -device-width可以防止内容适应桌面或其他允许调整窗口大小的设备，因为查询基于实际的设备大小，而不是浏览器窗口的大小 .

进一步阅读：
回复于 2024-04-24T07:08:59+08:00
89

如果使用max-width，当您更改桌面上浏览器窗口的大小时，可能会显示面向移动的样式，例如触摸友好元素和菜单等 .

令我震惊的是，这似乎是受欢迎的意见，这是可取的 . 我还没弄清楚移动设备之前的流体/液体设计是否被认为是错误或正确的原因 . 在我看来，这只是液体布局的一个更好的版本，但是设计师出于某种原因而拥抱的版本 .

当设计界在2000年代中期选择使用固定布局而不是液体时，这是因为文本回流阻碍了易读性，经常导致寡妇和其他典型的文物 . 此外，从设计到设计保持代码库通常很棘手，以防止元素碰撞等液体布局和响应式设计之间的区别在于响应性，由于更好的浏览器和类似砖石的框架的扩散使其更容易实现 .

我个人使用min / max-device-width，因为我更喜欢遵循具有数十年优先权的桌面文档约定 . 并非您在互联网上打开的所有文档都会以这种方式在桌面上运行，也不会在桌面上加载其他类型的文档或应用程序 . 在移动主导之前设计的页面，就像MS Word，Photoshop等一样，保持其滚动位置并且不改变它们的布局，允许用户在执行窗口管理的无关任务时跟踪页面流中的内容 .

我通常使用3个断点：一个用于手机，一个用于平板电脑，一个用于桌面 . 桌面和通常至少是横向肖像是固定的，平板电脑肖像和下面是液体 . 这种自适应和响应的组合使桌面可以像桌面站点一样运行，同时使我无需布局10多个独立的固定宽度移动设备布局 . 文本不会在移动设备上重排，因为视口无法调整大小 .

回复于 2024-04-24T07:08:59+08:00
6

避免设备宽度 . 原因是您无法知道用户浏览器如何响应它 .

对于IOS来说，它似乎很简单，至少对于Safari来说 . 它似乎是一个独立于方向的设备宽度响应 . 此外，器件宽度仅适用于器件的短边 . 我在iPhone 4S和iPad上测试了这个 . 无论朝哪个方向，他们分别对320和768作出回应 .

对于Android来说，它更难以预测 . 我在华为Ascend Y330（Android默认浏览器，Chrome，Opera，Firefox，Firefox Beta，Dolphin）上测试了六款浏览器 . 响应因浏览器类型和方向而异 .

我在一个带有查询的页面上测试（max-device-width：*** px），并找出我需要填写的px值以使查询处于真实状态 . 根据浏览器类型和方向，需要四个不同的值（320,480,534,800） . 这使得设备宽度无法使用 .

回复于 2024-04-24T07:08:59+08:00

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

3 回答

TL; DR

解释

进一步阅读：

相关问题