CSS 我应该使用 max-device-width 还是 max-width？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18500836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Should I use max-device-width or max-width?
提问by Jared
With CSS media queries you can use max-device-widthto target a device width (such as an iPhone or Android device) and/or a max-widththat targets a page width.
使用 CSS 媒体查询，您可以用于max-device-width定位设备宽度（例如 iPhone 或 Android 设备）和/或max-width定位页面宽度。
If you use max-device-width, when you change the size of the browser window on your desktop, the CSS won't change, because your desktop doesn't change size.
如果您使用max-device-width，当您更改桌面上浏览器窗口的大小时，CSS 不会更改，因为您的桌面不会更改大小。
If you use max-width, when you change the size of the browser window on your desktop, you might be shown mobile-orientated styling, such as touch-friendly elements and menus and that kind of thing.
如果您使用max-width，当您更改桌面上浏览器窗口的大小时，您可能会看到面向移动设备的样式，例如触摸友好的元素和菜单等等。
Targeting specific browsers (and devices?) is now deprecated and you should be a little more agnostic with what you target. Does that apply to media queries too?
针对特定浏览器（和设备？）现在已被弃用，您应该对自己的目标更加不可知。这也适用于媒体查询吗？
Why would you target one over the other? Which one is the recommended one?
你为什么要瞄准另一个？推荐的是哪一款？
This is an example of a media query I use on a production website:
这是我在生产网站上使用的媒体查询示例：
@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... */
}
I tend to use both max-device-widthand max-width.
我倾向于同时使用max-device-width和max-width。
回答by Josh Crozier
TL;DR
TL; 博士
If you're making a responsive website, use min-width/max-widthin your media queries rather than min-device-width/max-device-widthin order to target a wider range of screen sizes.
如果您正在制作响应式网站，请在媒体查询中使用min-width/max-width而不是min-device-width/max-device-width以定位更广泛的屏幕尺寸。
According to the 2018 Media Queries Level 4 specification draft, the device-widthmedia feature is deprecated. It will be kept for backward compatibility, but should be avoided.
根据 2018 Media Queries Level 4 规范草案，device-width媒体功能已弃用。为了向后兼容，将保留它，但应该避免。
8. Appendix A: Deprecated Media Features
To query for the size of the viewport (or the page box on page media), the
width,heightandaspect-ratiomedia features should be used, rather thandevice-width,device-heightanddevice-aspect-ratio, which refer to the physical size of the the device regardless of how much space is available for the document being laid out. Thedevice-*media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
要查询视口（或页面媒体上的页面框）的大小
width，应使用 ,height和aspect-ratio媒体功能，而不是device-width,device-height和device-aspect-ratio，它们指的是设备的物理大小，无论有多少可用空间正在布置的文件。所述device-*媒体特征有时也被用作代理，以检测移动设备。相反，作者应该使用能够更好地代表他们尝试设计风格的设备方面的媒体功能。
As a side note, remember to specify a viewport meta tagin the <head>section of your document:
作为旁注，请记住在文档部分指定视口元标记<head>：
<meta name="viewport" content="width=device-width, initial-scale=1">
Explanation
解释
Due to all the different possible screen resolutions and pixel densities a given device can have, a pixel is not a pixelbecause there are several things to take into consideration (zoom, pixel density, screen resolution and size, device orientation, aspect ratio, etc..). In this case, a pixel is actually referred to as a "optical reference unit"rather than a physic hardware pixel.
由于给定设备可能具有的所有不同可能的屏幕分辨率和像素密度，像素不是像素，因为需要考虑多种因素（缩放、像素密度、屏幕分辨率和尺寸、设备方向、纵横比等） ...）。在这种情况下，像素实际上被称为“光学参考单元”而不是物理硬件像素。
Fortunately, you can specify a viewport meta tagin the <head>section of your document in order to control the width and scaling of the browser's viewport. If this tag has a contentvalue of width=device-width, the screen's width will match the device independent pixelsand will ensure that all the different devices should scale and behave consistently.
幸运的是，您可以在文档的部分指定视口元标记，<head>以控制浏览器视口的宽度和缩放比例。如果此标签的content值为width=device-width，则屏幕的宽度将与设备无关的像素匹配，并确保所有不同的设备都应缩放并保持一致的行为。
<meta name="viewport" content="width=device-width, initial-scale=1">
In terms of media queries, you will probably want to use max-widthrather than max-device-width, since max-widthwill target the viewport (current browser window), whereas max-device-widthwill target the device's actual full screen size/resolution.
在媒体查询方面，您可能希望使用max-width而不是max-device-width，因为max-width它将针对视口（当前浏览器窗口），而max-device-width将针对设备的实际全屏尺寸/分辨率。
In other words, if you are using max-device-width, you will not see different media queries applied when resizing your desktop browser, because unlike max-width, only the device's actual full screen size is taken into consideration; not the current size of the browser window.
换句话说，如果您使用的是max-device-width，则在调整桌面浏览器大小时不会看到应用了不同的媒体查询，因为与 不同的是max-width，仅考虑设备的实际全屏大小；不是浏览器窗口的当前大小。
This makes a huge difference if you're trying to create an adaptive layout because the site won't be responsive when resizing the browser. In addition, if you're using max-device-widththe media queries you're using to target devices with smaller screens will not apply to desktops even when resizing the browser window down to match said smaller screen size.
如果您尝试创建自适应布局，这会产生巨大的差异，因为在调整浏览器大小时站点不会响应。此外，如果您使用max-device-width媒体查询来定位屏幕较小的设备，则即使将浏览器窗口缩小以匹配所述较小的屏幕尺寸，也不适用于桌面。
As of 2018, the latest media query specification drafthas actually deprecated the device-widthmedia feature, therefore it should be avoided.
截至 2018 年，最新的媒体查询规范草案实际上已经弃用了device-width媒体功能，因此应避免使用。
In addition, this article on Google Developershighly discourages the usage of max-device-width:
此外，Google Developers 上的这篇文章强烈反对使用max-device-width：
Google Developers - Web Fundamentals - Responsive CSS media queries
It is also possible to create queries based on
*-device-width; though this practice is strongly discouraged.The difference is subtle but very important:
min-widthis based on the size of the browser window, whereasmin-device-widthis based on the size of the screen. Unfortunately some browsers, including the legacy Android browser may not report the device width properly and instead report the screen size in device pixels instead of the expected viewport width.In addition, using
*-device-widthcan prevent content from adapting on desktops or other devices that allow windows to be resized because the query is based on the actual device size, not the size of the browser window.
Google Developers - 网络基础 - 响应式 CSS 媒体查询
也可以基于以下内容创建查询
*-device-width；尽管强烈不鼓励这种做法。区别很细微但非常重要：
min-width基于浏览器窗口的大小，而min-device-width基于屏幕的大小。不幸的是，包括旧版 Android 浏览器在内的一些浏览器可能无法正确报告设备宽度，而是报告以设备像素为单位的屏幕尺寸，而不是预期的视口宽度。此外，使用
*-device-width可以防止内容适应桌面或其他允许调整窗口大小的设备，因为查询基于实际设备大小，而不是浏览器窗口的大小。
Further Reading:
进一步阅读：
回答by H?kan Olsson
Avoid device-width. The reason is you can't know how the users browsers respond to it.
避免设备宽度。原因是你无法知道用户浏览器如何响应它。
For IOS, it seems to be simple, at least with Safari. It seems to be one single device-width response independent of orientation. Also, device-width is stated only for the shorter side of the device. I did test this on iPhone 4S and iPad. They did respond to 320 and 768 respectively no matter what orientation.
对于 IOS 来说，似乎很简单，至少对于 Safari。它似乎是一个独立于方向的单一设备宽度响应。此外，设备宽度仅适用于设备的较短边。我确实在 iPhone 4S 和 iPad 上测试过。无论什么方向，它们都分别响应了 320 和 768。
For Android it's more unpredictable. I tested six browsers on a Huawei Ascend Y330 (Android default browser, Chrome, Opera, Firefox, Firefox Beta, Dolphin). The response vary depending on browser type and orientation.
对于Android，它更不可预测。我在华为 Ascend Y330（Android 默认浏览器、Chrome、Opera、Firefox、Firefox Beta、Dolphin）上测试了六种浏览器。响应因浏览器类型和方向而异。
I tested on a page with query (max-device-width: ***px) and to find out what px-value I need to fill in to get the query in a true state. Four different values were needed (320, 480, 534, 800) depending on browser type and orientation. This makes device-width unusable.
我在带有查询 (max-device-width: ***px) 的页面上进行了测试，并找出需要填写的 px 值以使查询处于真实状态。根据浏览器类型和方向，需要四个不同的值（320、480、534、800）。这使得设备宽度无法使用。
回答by Paul Fox
If you use max-width, when you change the size of the browser window on your desktop, you might be shown mobile-orientated styling, such as touch-friendly elements and menus and that kind of thing.
如果您使用 max-width，当您更改桌面上浏览器窗口的大小时，您可能会看到面向移动设备的样式，例如触摸友好的元素和菜单等等。
It's shocking to me that it seems to be popular opinion that this is desirable. I haven't figured out if fluid/liquid design before mobile was considered bad for the wrong or the right reasons. It appears to me that this is just a fancier version of liquid layout, but one that designers are embracing for some reason.
令我震惊的是，人们普遍认为这是可取的。我还没有弄清楚移动之前的流体/液体设计是否因为错误或正确的原因被认为是不好的。在我看来，这只是液体布局的一种更高级的版本，但设计师出于某种原因正在接受它。
When the design community at large chose to side with fixed layouts over liquid in the mid 2000s, it was because text reflows impeded legibility often resulting in widows and other typogrphical artifacts. Additionally, maintaining the codebase was often tricky from design to design to keep elements from colliding etc. The only difference between liquid layouts and responsive design is that responsive, due to better browsers and the proliferation of masonry-like frameworks make it easier to accomplish.
当整个设计社区在 2000 年代中期选择固定布局而不是液体时，这是因为文本回流阻碍了易读性，通常会导致寡妇和其他排版伪影。此外，从设计到设计维护代码库通常很棘手，以防止元素发生碰撞等。液体布局和响应式设计之间的唯一区别是响应式布局，由于更好的浏览器和类似砖石框架的扩散，使其更容易实现。
I personally use min/max-device-width because I prefer to follow desktop document conventions that have decades of precedence. Not all documents you open on the internet are going to behave this way on a desktop, nor are other types of documents or applications that you load on your desktop. Pages designed before the dominance of mobile, just like MS Word, Photoshop, etc. hold their scroll positions and do not change their layouts allowing users to keep track of content within the page flow when performing the unrelated task of window management.
我个人使用 min/max-device-width 是因为我更喜欢遵循具有数十年优先权的桌面文档约定。并非您在 Internet 上打开的所有文档都会在桌面上以这种方式运行，您在桌面上加载的其他类型的文档或应用程序也不会。在移动主导之前设计的页面，就像 MS Word、Photoshop 等一样，保持它们的滚动位置并且不会改变它们的布局，允许用户在执行与窗口管理无关的任务时跟踪页面流中的内容。
I generally use 3 breakpoints: one for phones, one for tablet and one for desktop. The desktop and often at least the landscape portrait are fixed and the tablet portrait and below are liquid. This combination of adaptive and responsive allows the desktop to behave like a desktop site while keeping me from needed to layout 10-odd separate fixed-width mobile device layouts. The text doesn't reflow on mobile devices because the viewport can't be resized.
我通常使用 3 个断点：一个用于手机，一个用于平板电脑，一个用于台式机。桌面和通常至少横向人像是固定的，而平板电脑人像和下方是流动的。自适应和响应的这种组合允许桌面表现得像一个桌面站点，同时让我不需要布局 10 多个单独的固定宽度移动设备布局。由于无法调整视口大小，因此文本不会在移动设备上重排。
