我应该使用最大设备宽度还是最大宽度？

Question 1

使用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。

Question 2

TL; DR

如果您要创建一个自适应网站，请在媒体查询中使用min-width/ max-width，而不是min-device-width/ max-device-width，以针对更大范围的屏幕尺寸。

根据2018年Media Queries Level 4规范草案，不建议使用device-width媒体功能。保留它是为了向后兼容，但应避免使用。

8.附录A：不推荐使用的媒体功能

欲查询的视口的大小（或页面媒体页面箱）， width，height和aspect-ratio媒体功能应该被使用，而不是device-width，device-height并且device-aspect-ratio，它指的是设备的物理尺寸，无论有多少空间可用于正在布置文档。所述device-*媒体特征有时也被用作代理，以检测移动设备。取而代之的是，作者应使用媒体功能，以更好地表现他们试图针对的设备外观。

作为附带说明，请记住在文档的部分中指定视口元标记<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-网络基础知识-响应式CSS媒体查询

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

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

此外，使用*-device-width会阻止内容在台式机或其他允许调整窗口大小的设备上进行调整，因为查询是基于实际设备的大小，而不是浏览器窗口的大小。

进一步阅读：

Question 3

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

对于IOS，这似乎很简单，至少对于Safari而言。这似乎是一个与方向无关的单个设备宽度响应。另外，设备宽度仅针对设备的较短侧进行说明。我确实在iPhone 4S和iPad上进行了测试。无论面向哪个方向，他们都分别响应了320和768。

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

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

Question 4

如果使用最大宽度，则在更改桌面上浏览器窗口的大小时，可能会显示面向移动的样式，例如触摸友好的元素和菜单等。

令我震惊的是，似乎很受欢迎。我还没有弄清楚，由于错误或正确的原因，在移动设备之前进行流体/液体设计是否被认为是不好的。在我看来，这只是液体布局的一种更好的版本，但由于某种原因，设计师们正在拥抱这种布局。

当整个设计界在2000年代中期选择在液体上放置固定版式时，这是因为文本回流阻碍了易读性，通常会导致寡妇和其他印刷品。另外，从设计到设计，维护代码库通常很棘手，以防止元素冲突等。液体布局和响应式设计之间的唯一区别是响应性，这是因为浏览器更好，并且类似砌体的框架的泛滥使它更易于实现。

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

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