響應式佈局的核心：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