使用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。
答案 0 :(得分：97)
如果您要制作自适应网站，请在媒体查询中使用min-width / max-width而不是min-device-width / max-device-width，以便定位更广泛的屏幕尺寸。
根据2018年Media Queries Level 4 specification draft，device-width媒体功能已弃用。它将保持向后兼容性，但应该避免使用。
<强> 8. Appendix A: Deprecated Media Features
要查询视口（或页面媒体上的页面框）的大小，应使用
width，height和aspect-ratio媒体功能，而不是{{1 }}，device-width和device-height，它们指的是设备的物理大小，无论可用于布置文档的空间有多大。device-aspect-ratio媒体功能有时也用作检测移动设备的代理。相反，作者应该使用更能代表他们试图反对的设备方面的媒体功能。
作为旁注，请务必在文档的device-*部分指定viewport meta tag：
<head>由于给定设备可能具有所有不同的屏幕分辨率和像素密度a pixel is not a pixel，因为有几件事需要考虑（缩放，像素密度，屏幕分辨率和尺寸，设备方向，宽高比）等等。）。在这种情况下，像素实际上被称为"optical reference unit"而不是物理硬件像素。
幸运的是，您可以在文档的<meta name="viewport" content="width=device-width, initial-scale=1">
部分指定viewport meta tag，以便控制浏览器视口的宽度和缩放比例。如果此标记的<head>值为content，则屏幕的宽度将为match the device independent pixels，并确保所有不同的设备都应该缩放并保持一致。
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，那么您用于定位具有较小屏幕的设备的媒体查询将无法应用于桌面，即使将浏览器窗口调整大小以匹配所述较小的屏幕尺寸也是如此。
自2018年起，最新的media query specification draft实际上已弃用max-device-width媒体功能，因此应避免使用。
此外，此article on Google Developers强烈反对使用device-width：
Google Developers - Web Fundamentals - Responsive CSS media queries
也可以根据
max-device-width创建查询;虽然这种做法强烈反对。差异很微妙但非常重要：
*-device-width基于浏览器窗口的大小，而min-width则基于屏幕的大小。遗憾的是，某些浏览器（包括旧版Android浏览器）可能无法正确报告设备宽度，而是以设备像素报告屏幕大小，而不是预期的视口宽度。此外，使用
min-device-width可能会阻止内容适应桌面或允许调整窗口大小的其他设备，因为查询基于实际的设备大小，而不是浏览器窗口的大小。
答案 1 :(得分：6)
如果您使用max-width，当您更改桌面上浏览器窗口的大小时，您可能会看到面向移动设备的样式，例如触摸友好元素和菜单等等。
令我震惊的是，这似乎是受欢迎的意见，这是可取的。我还没弄清楚移动设备之前的流体/液体设计是否因为错误或正确的原因而被认为是坏的。在我看来，这只是液体布局的一个更好的版本，但是设计师出于某种原因而拥抱的版本。
当设计界在2000年代中期选择使用固定布局而不是液体时，这是因为文本回流阻碍了可读性，经常导致寡妇和其他典型的文物。此外，维护代码库从设计到设计通常都很棘手，以防止元素碰撞等。液体布局和响应式设计之间的唯一区别在于响应性，由于更好的浏览器和类似砖石的框架的扩散使其更容易实现。
我个人使用min / max-device-width，因为我更喜欢遵循具有数十年优先权的桌面文档约定。并非您在互联网上打开的所有文档都会以这种方式在桌面上运行，也不会在桌面上加载其他类型的文档或应用程序。在移动主导之前设计的页面，就像MS Word，Photoshop等一样，保持滚动位置，不改变布局，允许用户在执行不相关的窗口管理任务时跟踪页面流中的内容。
我通常使用3个断点：一个用于手机，一个用于平板电脑，一个用于桌面。桌面和通常至少是横向肖像是固定的，平板电脑肖像和下面是液体。这种自适应和响应的组合使桌面可以像桌面站点一样运行，同时使我无需布局10多个独立的固定宽度移动设备布局。文本无法在移动设备上重排，因为视口无法调整大小。
答案 2 :(得分：6)
避免设备宽度。原因是您无法知道用户浏览器如何响应它。
对于IOS来说，它似乎很简单，至少对于Safari来说。它似乎是一个独立于方向的设备宽度响应。此外，器件宽度仅适用于器件的短边。我在iPhone 4S和iPad上测试了这个。无论朝哪个方向，他们分别对320和768作出回应。
对于Android来说，它更难以预测。我在华为Ascend Y330（Android默认浏览器，Chrome，Opera，Firefox，Firefox Beta，Dolphin）上测试了六款浏览器。响应因浏览器类型和方向而异。
我在一个带有查询的页面上测试（max-device-width：*** px），并找出我需要填写的px值以使查询处于真实状态。根据浏览器类型和方向，需要四个不同的值（320,480,534,800）。这使得设备宽度无法使用。