@media中max-width和max-device-width
0
max-device-width和max-width的区别：
max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。max-width是目标显示区域的宽度，例如，浏览器宽度。- 如果使用
max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。 - 如果使用
max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。 - 通常，面向“移动设备”用户使用
max-device-width；面向“PC设备”用户使用max-width。
另外使用@media screen and (max-width:1200px){html{font-size:18px;}}这样设置的时候，最好使用的max-xxxx进行判断。
@media only screen and表示仅限屏幕。