max。有什么区别？
我需要为iphone / android手机开发一些html页面，但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 。
max-width是指视口的宽度，可用于将特定尺寸或方向与max-height结合使用。 使用多个max-width （或min-width ）条件，可以在浏览器调整大小时更改页面样式，或改变iPhone等设备的方向。
max-device-width指的是设备的视口大小，不管方向，当前比例或调整大小。 这不会在设备上更改，因此无法在屏幕旋转或调整大小时切换样式表或CSS指令。
你对使用这种风格有什么看法？
对于基本都是为“移动装置”的所有断点我用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 */
}