响应式布局的核心：css3媒体查询选择器。
@media相关属性：
1.媒体类型：
all:所有媒体（默认值）.
screen:彩色屏幕.
print:打印预览.
projection:手持设备.
tv:电视.
braille:盲文触觉设备.
embossed:盲文打印机.http://www.daiqiyang.com
speech:屏幕阅读器等发声设备.
tty:不适用像素的设备.
2.媒体属性:
width:浏览器窗口的尺寸（可加max min前缀）.
min-width:100px >=100px
max-width:100px <=100px
height:浏览器窗口的尺寸（可加max min前缀）.
device-width:设备独立像素（可加max min前缀）.
pc端:分辨率.
移动端:具体看机器的参数.
device-pixel-ratio:屏幕可见宽度与高度的比率/像素比（可加max min前缀，需要加-webkit前缀）.
pc端:1.
移动端:具体看机器的参数（DPR）.
orientation:portrait(竖屏) | landscape(横屏)
3.操作符，关键字（only,and,(, or),not）
only:和浏览器兼容性有关，老版本的浏览器只支持媒体类型，不支持带媒体属性的查询.
@media only screen and (min-width:800px){css-style规则}
@media screen and (min-width:800px){css-style规则}
在老款的浏览器下:
@media only --> 因为没有only这种设备,规则被忽略.
@media screen --> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询，执行相应的样式.
建议在每次抒写@media 媒体类型的时候带上only.http://www.daiqiyang.com
and:代表与的意思，一般用and来连接媒体类型和媒体属性.
类似JS里的&&.
or(,):和and相似.
对于所有的连接选项只要匹配成功一个就能应用规则.
类似JS里的||.
not:取反,类似JS里的!.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1.媒体类型
通常我们使用的都是彩色屏幕（screen）,打印预览（print）,其他的都很少使用，条件有限，在这里就演示这两种：
css代码：
#box{
width:200px;
height:200px;
border:1px solid;
margin:100px auto;
}
@media screen {
#box{
border:100px solid;
}
}
1
2
3
4
5
6
7
8
9
10
11
HTML代码：
<div id="box"></div>
1
页面效果：
screen
可以看见页面屏幕的时候应用的@media的样式，但是打印预览的时候没有@media的样式。
媒体类型换成print试试：
@media print{
#box{
border:100px solid;
}
}
1
2
3
4
5
页面效果：
print
可以看见页面屏幕的时候并没有应用@media的样式，但是打印预览的时候应用了@media的样式。
2.媒体属性
浏览器窗口的尺寸：width（常用），height（高度一般很少使用）（可加max min前缀）。
@media screen and (width:1000px) {
#box{
border:100px solid
}
}
1
2
3
4
5
页面效果：
width
可以看见当浏览器窗口大小为1000px时才会应用@media的样式，多1px，少1px都不行。
让width加上min试试：
@media screen and (min-width:1000px) {
#box{
border:100px solid
}
}
1
2
3
4
5
页面效果：
min-width
可以看见浏览器窗口宽度再大于等于1000px的时候才会应用@media的样式。
让width加上max试试：
@media screen and (max-width:1000px) {
#box{
border:100px solid
}
}
1
2
3
4
5
页面效果：
max-width
可以看见浏览器窗口宽度再小于等于1000px的时候才会应用@media的样式。
height跟width的原理一样，在这里就不过多解释了。http://www.daiqiyang.com
device-width：设备独立像素（可加max min前缀）。
设备独立像素就是当前显示设备的分辨率，比如我当前的屏幕分辨率是1920px*1080px，根据这设置下@media：
@media screen and (device-width:1920px) {
#box{
border:100px solid
}
}
1
2
3
4
5
页面效果：
device-width
可以看见不管怎么调整浏览器窗口大小，@media的样式都是生效的。
我们设置成iPhone6的屏幕宽度375px：http://www.daiqiyang.com