TL; DR
如果您要创建一个自适应网站，请在媒体查询中使用
min-width/
max-width，而不是
min-device-width/
max-device-width，以针对更大范围的屏幕尺寸。
根据2018年Media Queries Level4规范草案，不建议使用
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媒体功能，因此应避免使用它。
此外，关于GoogleDevelopers的这篇文章强烈建议不要使用
max-device-width：
Google Developers-网络基础知识-响应式CSS媒体查询
也可以基于
*-device-width; 创建查询；尽管 强烈反对 这种做法。
差异是微妙的，但非常重要：
min-width基于浏览器窗口的大小，而
min-device-width基于屏幕的大小。不幸的是，包括旧版Android浏览器在内的某些浏览器可能无法正确报告设备宽度，而是报告以设备像素为单位的屏幕尺寸，而不是预期的视口宽度。
此外，使用
*-device-width可以防止内容在桌面或其他允许调整窗口大小的设备上适应，因为查询基于实际设备大小，而不是浏览器窗口的大小。
