@media中max-width和max-device-width

max-device-widthmax-width的区别:

  1. max-device-width是设备整个显示区域的宽度,例如,真实的设备屏幕宽度。
  2. max-width是目标显示区域的宽度,例如,浏览器宽度。
  3. 如果使用max-device-width,那么在PC浏览器上浏览网页时,缩小或放大浏览器时是不执行CSS的,因为“PC设备”没有变化。但如果使用max-width,缩小或放大浏览器时是执行CSS的,因为“显示区域”即浏览器大小发生了变化。
  4. 如果使用max-device-width,那么当手机由竖变横时,CSS是不执行的,因为“手机宽度”并没有变化。如果使用max-width,那么当手机由竖变横时,CSS是执行的,因为“显示区域”发生了变化。
  5. 通常,面向“移动设备”用户使用max-device-width;面向“PC设备”用户使用max-width

另外使用@media screen and (max-width:1200px){html{font-size:18px;}}这样设置的时候,最好使用的max-xxxx进行判断。

@media only screen and表示仅限屏幕。

参考文章:http://www.runoob.com/cssref/css3-pr-mediaquery.html