媒体查询的使用

注意点： 书写一定要规范，@media screen and (min-width:1200px){} 中间的间隔一定要有，不然可能会导致没有效果，不生效

使用步骤：响应式头部加meta标签

width = device-width：宽度等于当前设备的宽度

initial-scale:初始的缩放比例(默认设置为1.0)

minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)

user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面)

媒体属性

width:浏览器可视宽度

height:浏览器可视高度

device-width:设备屏幕的宽度

device-height:设备屏幕的高度

orientation:检测设备目前处于横向还是纵向状态

aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)

device-aspect-ratio:检测设备的宽度和高度的比例

color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）

color-index:检查设备颜色索引表中的颜色，他的值不能是负数

monochrome:检测单色楨缓冲区域中的每个像素的位数。

resolution:检测屏幕或打印机的分辨率

grid：检测输出的设备是网格的还是位图设备。

引入方式：最好的引入方式是css3中的，把媒体查询都写到一个css文件里面，然后link进去这个css文件

1.基本使用。 基本属性有最大宽度，最小宽度
“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效
“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

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

2.多个媒体特性使用。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}

3.设备屏幕的输出宽度Device Width。

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

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率

1. not关键词。

使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如：

@media not print and (max-width: 1200px){样式代码}
上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

或：

还可以这样用，
限制只有视口宽度大于800像素的显示屏设备才会加载文件

或：

往深处延伸，可以用逗号来表示或运算，只要满足其中一个即可。

5.根据设备的各种功能特性来设定相应的样式。

媒体查询表达式询问了媒体类型（你是一块显示屏吗？），然后询问了媒体特性（显示屏是纵向放置的吗？）。任何纵向放置的显示屏设备都会加载
portrait-screen.css样式表，其他设备则会忽略。
在媒体查询开头追加not则会颠倒改查询的逻辑。