我应该使用最大设备宽度还是最大宽度？
使用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 。
TL; DR
如果您制作的是响应式网站，则可能需要使用min-width / max-width而不是min-device-width / max-device-width来定位更大范围的屏幕尺寸。
请记住在文档的<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不同，只会考虑设备的实际全屏大小。 不是浏览器窗口的当前大小。
如果您尝试创build自适应布局，这会产生巨大的差异，因为在调整浏览器大小时，网站不会响应。 此外，如果您使用的是max-device-width则即使将浏览器窗口调整为与较小的屏幕大小相匹配，您使用的媒体查询也将不适用于桌面。
Google Developers上的这篇文章强烈build议您不要使用max-device-width ：
Google Developers – Web基础知识 – 响应式CSS媒体查询
也可以根据
*-device-width创build查询。 尽pipe这种做法是强烈的不鼓励 。差别很微妙但非常重要：
min-width基于浏览器窗口的大小，而min-device-width则基于屏幕的大小。 不幸的是，包括传统Android浏览器在内的一些浏览器可能无法正确报告设备宽度，而是报告设备像素中的屏幕大小而不是预期的视口宽度。此外，使用
*-device-width可以防止内容在桌面或其他允许窗口大小调整的设备上调整，因为查询是基于实际的设备大小而不是浏览器窗口的大小。
进一步阅读：
- Quirksmode.org – 一个像素不是一个像素不是一个像素
- W3.org CSS3媒体查询文档
- Google Developers – Web基础知识 – 视口
- Google Developers – Web基础知识 – 响应式CSS媒体查询
- MDN – 使用视口元标记控制移动浏览器的布局
如果使用最大宽度，当您更改桌面上浏览器窗口的大小时，可能会显示移动设备的样式，例如触摸友好的元素和菜单等等。
对我来说，这似乎是stream行的观点，这是令人震惊的，这是可取的。 我还没有弄清楚stream动前的stream体/液体devise是否被认为是错误的或正确的原因。 在我看来，这只是一个更stream行的液体布局版本，但是由于某种原因，devise师正在拥抱这个版本。
当devise界在二十世纪二十年代中期select在液体上固定布局时，这是因为文本回stream阻碍了易读性，常常导致寡妇和其他types的文物。 另外，维护代码库从devise到devise往往是非常棘手的，以防止元素之间的冲突等。stream式布局和响应式devise之间唯一的区别在于响应式，由于更好的浏览器和类似框架的框架的扩散使得更容易完成。
我个人使用最小/最大设备宽度，因为我更喜欢遵循具有数十年优先级的桌面文档约定。 并非您在互联网上打开的所有文档都将在桌面上以这种方式运行，您的桌面上也不会加载其他types的文档或应用程序。 在移动设备之前devise的页面，就像MS Word，Photoshop等一样，它们保持滚动位置，不改变它们的布局，允许用户在执行不相关的窗口pipe理任务时跟踪页面内的内容。
我通常使用3个断点：一个用于手机，一个用于平板电脑，另一个用于桌面。 桌面，通常至less是风景画像是固定的，平板电脑画像和下面是液体。 自适应和响应的这种组合使得桌面可以像桌面站点一样运行，同时还可以根据需要布置10多个单独的固定宽度的移动设备布局。 文字不会在移动设备上重排，因为视口无法resize。
避免设备宽度。 原因是你无法知道用户浏览器如何回应。
对于IOS来说，似乎很简单，至less在Safari中。 它似乎是一个独立于方向的设备宽度响应。 此外，设备宽度仅针对设备的较短侧进行陈述。 我在iPhone 4S和iPad上testing过。 不pipe方向如何，他们分别回应了320人和768人。
对于Android来说，这是更不可预测的。 我在华为Ascend Y330（Android默认浏览器，Chrome，Opera，Firefox，Firefox Beta，Dolphin）上testing了6个浏览器。 响应因浏览器types和方向而异。
我使用查询（max-device-width：*** px）在页面上testing，并找出我需要填写什么px值来使查询处于真实状态。 根据浏览器的types和方向，需要四个不同的值（320,480,534,800）。 这使得设备宽度不可用。
