利用我們的CSS3實作響應式佈局
僅僅有彈性盒還不夠
CSS3還擴展了media屬性，增加了一個模組功能
Media Queries媒體查詢功能
隨著行動裝置的快速普及
越來越多的使用者使用智慧型機、平板電腦等瀏覽頁面
所有考慮到用戶的需求
我們要保證用戶在各種設備上瀏覽頁面都有不錯的體驗
這樣我們就需要媒體查詢
它允許我們為不同的設備或不同條件的設備設定不同的樣式
不過如果行動端有很重要的需求
還是應該針對行動端開發專門的頁面比較好
下面我們來看看引入媒體查詢的方式
首先我們先來看看link方法
這是CSS2中的做法
使用link標籤和media屬性來引入不同樣式表（如果滿足條件）
<link rel="stylesheet" media="screen and (max-width: 600px)" href="demo.css" />
這裡引入兩個概念
一個是媒體類型（Media Type），這裡的screen
一個是媒體特性 （Media Query），這裡的max-width: 600px
Media Query是CSS3 對Media Type的增強版
其實可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規則)
這段程式碼翻譯過來就是
如果媒體媒體是螢幕類型並且視窗寬度≤600px，則引入demo.css樣式檔案
我們在CSS3中的做法是在CSS檔案中使用@media規則添加不同樣式
相比link，它能夠減少頁面請求，效果更佳
@media screen and (max-width: 600px) { .demo1 { ......
}
.demo2 {
......
}
}媒體查詢有很多很多，我們不需要了解那麼多
常用的只有上面兩種
@import也可以使用媒體查詢
@import url(demo.css) screen;
如果我們想要指定多個媒體特性
就直接使用and關鍵字
媒體特性部分的指定需要使用括號
media="screen and (min-width: 601px) and (max-width: 800px)"
樣式應用在601px~800px之間的畫面
媒體查詢沒有or指定備用媒體功能，但是我們可以使用逗號分隔清單
media="screen and (min-width: 601px), print and (min-width: 6in)"
樣式應用在601px+的螢幕或使用至少6英吋寬的紙張的列印設備
媒體查詢可以指定否定條件
需要我們在媒體聲明的最前面使用關鍵字not
注意，它不能再單一條件前單獨聲明，not會否定整個媒體聲明
media="not screen and (min-width: 600px) and (max-width: 800px)"
樣式應用在不是600px~800px之間的屏幕
除了not關鍵字，還有一個only
它用來向早期的瀏覽器隱藏媒體查詢
類似於not，必須宣告在媒體宣告語句的最前面
例如這段宣告
media="screen and (min-width: 601px) and (max-width: 800px)"
早期的瀏覽器，只能把它理解成media="screen"
由於它不理解媒體特性，所以它會對所有螢幕裝置應用樣式規則
但是使用了only關鍵字
media="only screen and (min-width: 601px) and (max-width: 800px)"
早期瀏覽器會把它理解為media="only "
但是不存在only媒體類型，所以它不會應用任何樣式
實現了向早期的瀏覽器隱藏媒體查詢的功能
媒體類型的關鍵字雖然很多，但是大多都被廢棄了（誰用啊）
常用的也就是all、screen，再就是print
| 媒體類型 | 描述 |
|---|---|
| all | #所有媒體裝置 |
| screen | 彩色螢幕：電腦、平板、智慧型電腦.. |
| 印表機、列印預覽 | |
| speech | 發生裝置：螢幕閱讀器.. |
| aural | （已廢棄）語音和音訊合成器 |
| braille | （已廢棄）以盲眼用盲法觸覺回饋設備 |
| embossed | （已廢棄）分頁的盲眼用點字法印表機 |
| handheld | |
媒體特性就非常多了，同樣很多用不上
| #媒體類型 | ##描述|
|---|---|
| #aspect-ratio | #輸出裝置中的頁面可見區域寬度與高度的比率|
| 輸出裝置每一組彩色原件的數量。如果不是彩色設備，則值等於0 | |
| 在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0 | |
| 輸出裝置的螢幕可見寬度與高度的比率 | |
| height | 輸出裝置的螢幕可見高|
| 輸出設備的螢幕可見寬度 | |
| 查詢輸出裝置是否使用柵格或點陣 | |
| 輸出裝置中的頁面可見區域高度 | |
| 輸出裝置的螢幕可見寬度與高度的最大比率 | |
| 輸出裝置每一組彩色原件的最大個數 | |
| ##輸出裝置的彩色查詢表中的最大條目數 | |
| 輸出裝置的螢幕可見寬度與高度的最大比率 | |
| 輸出裝置的螢幕可見的最大高度 | |
| 輸出裝置的螢幕最大可見寬度 | |
| #輸出裝置中的頁面最大可見區域高度 | |
| ome在一個單色 | 框架緩衝區中每個像素包含的最大單色原件個數 |
| 裝置最大解析度 | |
| 輸出裝置中頁面最大可見區域寬度 | |
| 輸出裝置中頁面可見區域寬度與高度的最小比率 | |
| 輸出裝置每一組彩色原件的最小個數 | |
| 輸出裝置的彩色查詢表中的最小條目數 | |
| 輸出裝置螢幕可見寬度與高度的最小比率 | |
| 輸出裝置的螢幕最小可見寬度 | |
| 輸出裝置的螢幕的最小可見高度 | |
| 輸出裝置中的頁面最小可見區域高度 | |
| 一個單色框架緩衝區中每個像素包含的最小單色原件個數 | |
| 裝置的最小解析度 | |
| 輸出裝置中的頁面最小可見區寬度 | |
| 在一個單色框架緩衝區中每像素包含的單色原件個數。如果不是單色設備，則值等於0 | |
| #輸出設備中的頁面可見區域高度是否大於或等於寬度 | |
| 裝置的解析度。如：96dpi, | 300dpi, 118dpcm |
| 電視類別裝置的掃描工序 | |
| #輸出裝置中的頁面可見區域寬度 |
device -width/height 是裝置的寬度（而不是瀏覽器的寬度）
width/height是我們瀏覽器視窗的尺寸
使用
document
Element.clientWidth/clientHeight即viewport 的值
以上是響應式佈局之CSS3媒體查詢Media Queries 的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
