如何用@media判断屏幕分辨率

需求：根据不同的屏幕属性展示不同的CSS样式

方案：使用@media判断

方法：

1. 屏幕小于550px的屏幕：

   @media only screen and (max-width: 550px) {
     ...
   }
   

2. 屏幕小于1000px的屏幕：

   @media only screen and (max-width: 1000px) {
     ...
   }
   

甚至可以根据不同屏幕指定两个不同的css文件：

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

参考资料：W3C SCHOOL