CSS 如何使用媒体查询

@media 媒体类型 and （媒体特性）{你的样式}

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

① and： 

使用关键词"and"将多个媒体特性结合在一起

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

在智能设备上，例如 iPhone、iPad 等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

②  not：

使用关键词 “not” 是用来排除某种制定的媒体类型

@media not print and (max-width: 1200px){样式代码}

也就是用来排除符合表达式的设备。换句话说，not 关键词表示对后面的表达式执行取反操作，如：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

③ only ：

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />