85

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

如果您使用max-device-width，当您更改桌面上浏览器窗口的大小时，CSS 不会更改，因为您的桌面不会更改大小。

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

针对特定浏览器（和设备？）现在已弃用，您应该对您的目标更加不可知论。这也适用于媒体查询吗？

你为什么要瞄准一个而不是另一个？哪一款是推荐的？

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

@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。

4

3 回答 3

118

TL;博士

如果您正在制作响应式网站，请在媒体查询中使用min-width/max-width而不是min-device-width/max-device-width以针对更广泛的屏幕尺寸。

根据 2018 Media Queries Level 4 规范草案，device-width媒体功能已被弃用。它将保留以实现向后兼容性，但应避免使用。

8. 附录 A：已弃用的媒体功能

要查询视口（或页面媒体上的页面框）的大小，width应使用height和媒体功能，而不是，和，它们指的是设备的物理大小，无论有多少空间可用于正在布置的文件。媒体功能有时也用作检测移动设备的代理。相反，作者应该使用能够更好地代表他们尝试设计风格的设备方面的媒体功能。aspect-ratiodevice-widthdevice-heightdevice-aspect-ratiodevice-*

作为旁注，请记住在文档的部分中指定视口元标记：<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

解释

由于给定设备可能具有的所有不同可能的屏幕分辨率和像素密度，一个像素不是一个像素，因为有几个因素需要考虑（缩放、像素密度、屏幕分辨率和尺寸、设备方向、纵横比等） ..)。在这种情况下，像素实际上被称为“光学参考单元”，而不是物理硬件像素。

幸运的是，您可以在文档部分指定视口元标记，以控制浏览器视口的宽度和缩放。<head>如果此标记的content值为width=device-width，则屏幕的宽度将与设备无关像素匹配，并确保所有不同设备的缩放和行为一致。

<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媒体查询来定位具有较小屏幕的设备，即使将浏览器窗口缩小以匹配所述较小的屏幕尺寸，也不会适用于桌面。

截至 2018 年，最新的媒体查询规范草案实际上已经弃用了device-width媒体功能，因此应该避免。

此外，Google Developers 上的这篇文章强烈反对使用max-device-width：

Google Developers - Web Fundamentals - 响应式 CSS 媒体查询

也可以基于*-device-width;创建查询 尽管强烈反对这种做法。

区别是微妙但非常重要的：min-width基于浏览器窗口的大小，而min-device-width基于屏幕的大小。不幸的是，包括旧版 Android 浏览器在内的一些浏览器可能无法正确报告设备宽度，而是以设备像素为单位报告屏幕尺寸，而不是预期的视口宽度。

此外，使用*-device-width可以防止内容适应桌面或其他允许调整窗口大小的设备，因为查询是基于实际设备大小，而不是浏览器窗口的大小。

延伸阅读：

于 2013-08-29T01:25:10.490 回答
6

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

对于 IOS 来说，这似乎很简单，至少 Safari 是这样。它似乎是一个独立于方向的单一设备宽度响应。此外，设备宽度仅针对设备的较短边进行说明。我确实在 iPhone 4S 和 iPad 上对此进行了测试。无论方向如何，他们确实分别响应了 320 和 768。

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

我在一个带有查询（最大设备宽度：***px）的页面上进行了测试，并找出我需要填写什么 px 值才能使查询处于真实状态。根据浏览器类型和方向，需要四个不同的值（320、480、534、800）。这使得设备宽度不可用。

于 2015-08-06T09:12:23.197 回答
5

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

令我震惊的是，这似乎是一种可取的流行观点。我还没有弄清楚移动之前的流体/液体设计是否因为错误或正确的原因被认为是不好的。在我看来，这只是流式布局的一种更高级的版本，但设计师出于某种原因正在接受它。

当整个设计社区在 2000 年代中期选择固定布局而不是液体时，这是因为文本重排阻碍了易读性，通常导致寡妇和其他印刷伪影。此外，从设计到设计来维护代码库通常很棘手，以防止元素发生冲突等。流动布局和响应式设计之间的唯一区别是响应式，由于更好的浏览器和类似砌体的框架的扩散使其更容易完成。

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

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

于 2014-05-15T04:47:55.573 回答