max-device-width和max-width有什么区别？我需要针对不同的屏幕尺寸使用不同的CSS。@media all and (max-device-width: 400px)
@media all and (max-width: 400px)
有什么区别？
max-width是目标显示区域的宽度，例如浏览器。
max-device-width是设备整个渲染区域的宽度，即实际设备屏幕。
max-height和max-device-height自然也是如此。
@media screen and (pointer: coarse) and (hover: none)，它将切换到移动版本，无论未来移动设备屏幕有多少像素。 - EoghanMmax-width 指的是视口的宽度，可以与 max-height 一起使用来针对特定的大小或方向。使用多个 max-width（或 min-width）条件，您可以在浏览器调整大小或设备（如 iPhone）更改方向时更改页面样式。
max-device-width 指的是设备的视口大小，不考虑方向，当前缩放或调整大小。这在设备上不会改变，因此无法用于在屏幕旋转或调整大小时切换样式表或CSS指令。
max-width 和 max-height 是最常使用的属性。 - hotshot309你觉得使用这种风格如何？
对于大多数针对“移动设备”的断点，我使用min(max)-device-width，而对于大多数针对“桌面”设备的断点，则使用min(max)-width。
有很多“移动设备”会糟糕地计算宽度。
请看http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml：
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* some CSS here */
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}
/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
}
max-device-width是设备的渲染宽度
@media all and (max-device-width: 400px) {
/* styles for devices with a maximum width of 400px and less
Changes only on device orientation */
}
@media all and (max-width: 400px) {
/* styles for target area with a maximum width of 400px and less
Changes on device orientation , browser resize */
}
max-width指的是目标显示区域的宽度，即浏览器当前尺寸。
区别在于max-device-width是整个屏幕的宽度，而max-width表示浏览器用来显示页面的空间。但另一个重要的区别是对Android浏览器的支持。实际上，如果您要使用max-device-width，这只能在Opera中使用，而我确信max-width将适用于各种移动浏览器（我已经在ANDROID的Chrome、Firefox和Opera中进行了测试）。
max-width 是目标显示区域的宽度，例如浏览器；max-device-width 是设备整个渲染区域的宽度，即实际设备屏幕的宽度。
• 如果您使用 max-device-width，当您在桌面上更改浏览器窗口的大小时，CSS 样式将不会更改为不同的媒体查询设置；
• 如果您使用 max-width，当您在桌面上更改浏览器的大小时，CSS 将更改为不同的媒体查询设置，并且可能会显示适用于移动设备的样式，例如触摸友好的菜单。
<meta name="viewport" ...>标签，max-device-width也可以正常工作，但是如果没有meta标签，max-width无法正常工作。 - Faizan Akram Dar