使用CSS媒体查询，您可以用于max-device-width定位设备宽度（例如iPhone或Android设备）和/或max- width定位页面宽度的。
max-device-width
max- width
如果使用max-device-width，则在更改桌面上浏览器窗口的大小时，CSS不会更改，因为您的桌面不会更改大小。
如果使用max-width，则在更改桌面上浏览器窗口的大小时，可能会显示面向移动的样式，例如触摸友好的元素和菜单等。
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。
如果您要创建一个自适应网站，请在媒体查询中使用min-width/ max-width，而不是min-device-width/ max- device-width，以针对更大范围的屏幕尺寸。
min-width
min-device-width
max- device-width
根据2018年Media Queries Level4规范草案，不建议使用device-width媒体功能。保留它是为了向后兼容，但应避免使用。
device-width
8.附录A：不推荐使用的媒体功能
欲查询的视口的大小（或页面媒体页面箱），width，height和aspect-ratio媒体功能应该被使用，而不是device- width，device-height并且device-aspect- ratio，它指的是设备的物理尺寸，无论有多少空间可用于正在布置文件。所述device-*媒体特征有时也被用作代理，以检测移动设备。取而代之的是，作者应使用媒体功能，以更好地表现他们试图针对的设备外观。
width
height
aspect-ratio
device- width
device-height
device-aspect- ratio
device-*
附带说明，请记住在文档的部分中指定视口元标记<head>：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
由于给定设备可能具有所有不同的屏幕分辨率和像素密度，因此像素不是像素，因为要考虑很多因素（缩放，像素密度，屏幕分辨率和大小，设备方向，宽高比等）..）。在这种情况下，实际上将像素称为“光学参考单元”，而不是物理硬件像素。
幸运的是，您可以在文档的部分中指定视口元标记，<head>以控制浏览器视口的宽度和缩放比例。如果此标记的content值为width=device-width，则屏幕的宽度将与设备无关的像素相匹配，并确保所有不同的设备均应缩放并保持一致的行为。
content
width=device-width
在媒体查询方面，您可能要使用max-width而不是max-device-width，因为它的max- width目标是视口（当前浏览器窗口），而max-device-width目标是设备的实际全屏尺寸/分辨率。
换句话说，如果您使用max-device-width，则在调整桌面浏览器大小时将不会看到应用其他媒体查询，因为与不同max- width，仅考虑设备的实际全屏尺寸；不是浏览器窗口的当前大小。
如果您尝试创建自适应布局，这将产生巨大的差异，因为该站点在调整浏览器大小时将不会响应。此外，如果您使用max-device- width媒体查询来定位具有较小屏幕的设备，则即使将浏览器窗口的大小调整为与较小的屏幕尺寸匹配时，该查询也不适用于台式机。
max-device- width
截至2018年，最新的媒体查询规范草案实际上已弃用了device-width媒体功能，因此应避免使用它。
此外，关于GoogleDevelopers的这篇文章强烈建议不要使用max-device-width：
Google Developers-网络基础知识-响应式CSS媒体查询
也可以基于*-device-width; 创建查询；尽管 强烈反对 这种做法。
*-device-width
差异是微妙的，但非常重要：min-width基于浏览器窗口的大小，而min-device-width基于屏幕的大小。不幸的是，包括旧版Android浏览器在内的某些浏览器可能无法正确报告设备宽度，而是报告以设备像素为单位的屏幕尺寸，而不是预期的视口宽度。
此外，使用*-device-width可以防止内容在桌面或其他允许调整窗口大小的设备上适应，因为查询基于实际设备大小，而不是浏览器窗口的大小。
