CSS3媒體查詢(xún)與自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)
前序
Media Query（媒體查詢(xún)）是CSS3中的新增內(nèi)容，用于定義不同媒體類(lèi)型在不同CSS屬性時(shí)的樣式表現(xiàn)。
在以前，如果我們想同一個(gè)網(wǎng)站對(duì)不同設(shè)備（比如PC端，手機(jī)端，平板端等等）提供支持，一般性的做法是針對(duì)不同的設(shè)備額外實(shí)現(xiàn)一套頁(yè)面，在web端判斷出訪(fǎng)問(wèn)設(shè)備類(lèi)型時(shí)再路由到不同的實(shí)現(xiàn)。
這種做法的弊端很明顯，因?yàn)轭~外的實(shí)現(xiàn)，所以后續(xù)的更新及維護(hù)都比較繁瑣且成本越來(lái)越高。那么我們有沒(méi)有一種方法，就是只有一份實(shí)現(xiàn)但是可以根據(jù)不同的設(shè)備自動(dòng)做展現(xiàn)上的調(diào)整。Media Query為這種思路的實(shí)現(xiàn)提供了支持。
這里是一個(gè)例子，當(dāng)改變?yōu)g覽器窗口的大小時(shí)，頁(yè)面上文本的顏色將會(huì)發(fā)生變化。其實(shí)現(xiàn)原理就是使用Media Query。
媒體類(lèi)型（Media Type）
我們先來(lái)談一談媒體類(lèi)型的相關(guān)內(nèi)容。那么，何為媒體類(lèi)型呢？
注意之前我們有說(shuō)到，所謂媒體查詢(xún)就是針對(duì)不同媒體類(lèi)型在不同CSS屬性時(shí)的樣式表現(xiàn)。注意這句話(huà)，它有兩個(gè)要素，第一是針對(duì)不同媒體類(lèi)型，第二是針對(duì)CSS屬性。
具體點(diǎn)，我們來(lái)點(diǎn)代碼，如下，
@media screen and (width: 888px) {
p {
color: gold;
}
}其中，
@media是關(guān)鍵字（可以將其理解成css的一種語(yǔ)法糖，跟@import類(lèi)似）screen，這個(gè)關(guān)鍵字就是我們所說(shuō)的媒體類(lèi)型（這里screen其實(shí)就是電腦屏幕）width: 888px，需要查詢(xún)的CSS屬性
所以上面的CSS Media Query代碼要表達(dá)的意思就是：當(dāng)頁(yè)面在電腦屏幕上展現(xiàn)時(shí)，且屏幕的width（寬度）屬性為888px時(shí)，設(shè)置所有的p標(biāo)簽元素的字體顏色為gold（土豪金，哈哈~）。
除了上面提到的screen，常見(jiàn)有媒體類(lèi)型如下表,
| 媒體類(lèi)型 | 備注 | 是否常用 |
|---|---|---|
all |
匹配所有設(shè)備 | 是 |
braille |
盲文設(shè)備 | 否 |
embossed |
盲文打印 | 否 |
handheld |
手持設(shè)備 | 否 |
print |
打印模式 | 是 |
projection |
演示模式、幻燈片等 | 否 |
screen |
電腦屏幕 | 是 |
speech |
演講 | 否 |
tty |
固定字母間距的網(wǎng)格的媒體，比如電傳打字機(jī) | 否 |
tv |
電視媒體 | 否 |
看到上面關(guān)于媒體類(lèi)型的表格后，其實(shí)我們常用的也就all、print、screen這幾種類(lèi)型。其中screen要屬于最常用的媒體類(lèi)型了。
在具體使用media type時(shí)，我們還可以使用not或者only這兩個(gè)關(guān)鍵字修飾媒體類(lèi)型，比如
@media only screen and (width: 888px) {
/* your css code */
}或者
@media not print and (width: 888px) {
/* your css code */
}其中，前者（only修飾詞）表示@media設(shè)置的樣式只對(duì)screen類(lèi)型適用；后者（not修飾詞）表示@media設(shè)置的樣式對(duì)除了print類(lèi)型之外的所有設(shè)備類(lèi)型生效。
媒體查詢(xún)（Media Query）
說(shuō)完了媒體類(lèi)型，我們?cè)賮?lái)說(shuō)一說(shuō)媒體查詢(xún)。其一般的語(yǔ)法如下，
@media screen and (width: 888px) {
/* your css code */
}媒體查詢(xún)中查詢(xún)兩字的含義就體現(xiàn)在screen和width: 888px上（可能更加傾向后者）。換句話(huà)說(shuō)，screen和width: 888px其實(shí)都是查詢(xún)的條件，當(dāng)有多個(gè)條件時(shí)，我們使用and將他們連起來(lái)。
上面的示例代碼中，查詢(xún)頁(yè)面的width屬性，當(dāng)其寬度為888px時(shí)，將應(yīng)用特別設(shè)置的樣式。
不過(guò)Media Query所支持的CSS屬性是有限的，與一般的CSS屬性并不一致，而且會(huì)有一些特別的可選項(xiàng)。如下表，
| 可查詢(xún)屬性 | 屬性值類(lèi)型 | 是否可用Max/Min前綴 | 描述 | 常用 |
|---|---|---|---|---|
color |
整數(shù) | 是 | 定義每一組輸出設(shè)備的彩色原件個(gè)數(shù)。如果不是彩色設(shè)備，則等于0 | 否 |
color-index |
整數(shù) | 是 | 定義在輸出設(shè)備的彩色查詢(xún)表中的條目數(shù)。如果沒(méi)有使用彩色查詢(xún)表，則等于0 | 否 |
width |
長(zhǎng)度 | 是 | 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾?/td> | 是 |
height |
長(zhǎng)度 | 是 | 定義輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域高度 | 是 |
device-width |
長(zhǎng)度 | 是 | 定義輸出設(shè)備的屏幕可見(jiàn)寬度（設(shè)備本身的寬度） | 是 |
device-height |
長(zhǎng)度 | 是 | 定義輸出設(shè)備的屏幕可見(jiàn)高度（設(shè)備本身的高度） | 是 |
orientation |
portrait/landscape |
否 | 定義height是否大于或等于width。值portrait代表是（豎屏），landscape代表否（橫屏） |
是 |
aspect-ratio |
整數(shù)/整數(shù) | 是 | 定義width與height的比率（寬高比） |
是 |
device-aspect-ratio |
整數(shù)/整數(shù) | 是 | 定義device-width與device-height的比率（寬高比）。如常見(jiàn)的顯示器比率：4/3, 16/9, 16/10 |
是 |
monochrome |
整數(shù) | 是 | 定義在一個(gè)單色框架緩沖區(qū)中每像素包含的單色原件個(gè)數(shù)。如果不是單色設(shè)備，則等于0 | 否 |
scan |
progressive/interlaced |
否 | 定義電視類(lèi)設(shè)備的掃描工序 | 否 |
grid |
整數(shù) | 否 | 用來(lái)查詢(xún)輸出設(shè)備是否使用柵格或點(diǎn)陣。只有1和0才是有效值，1代表是，0代表否 |
否 |
resolution |
dpi/dpcm | 是 | 定義設(shè)備的分辨率。如：96dpi, 300dpi, 118dpcm | 否 |
看過(guò)上面的表格之后，我們會(huì)發(fā)現(xiàn)其實(shí)Media Query就是為了不同設(shè)備而誕生的。就目前而言，我們常用的查詢(xún)屬性也就那么幾個(gè)，大部分與寬高有關(guān)系（其實(shí)就是設(shè)置的展現(xiàn)區(qū)域大小）。
從上面的表格中，我們可以看出有部分的可查詢(xún)屬性還有添加max-或者min-前綴進(jìn)行修飾。比如，
@media screen and (min-width: 961px) and (max-width: 1200px) {
p {
color: pink;
}
}上面代碼的含義是指，當(dāng)展現(xiàn)頁(yè)面的寬度大于960px且小于1200px時(shí)，將p標(biāo)簽的字體顏色設(shè)置為粉色。
這個(gè)例子中，我們使用了width和height這兩個(gè)可查詢(xún)屬性，而且還使用了max和min對(duì)齊進(jìn)行修飾，分別表示最小寬度和最大寬度。
自適應(yīng)（響應(yīng)式）網(wǎng)頁(yè)設(shè)計(jì)
Responsive Web Design，國(guó)人將其翻譯成響應(yīng)式Web設(shè)計(jì)，個(gè)人覺(jué)得翻譯成自適應(yīng)Web設(shè)計(jì)可能更佳。它的意思就是可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)。
我們可以使用CSS3的Media Query做一些自適應(yīng)的網(wǎng)頁(yè)設(shè)計(jì)。比如，
<head>
<link rel="stylesheet" media="screen and (max-width: 480px)" href="tiny.css" />
<link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 600px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 601px) and (max-width: 960px)" href="middle.css" />
<link rel="stylesheet" media="screen and (min-width: 961px)" href="pc.css" />
</head>上述代碼的含義很明確，查詢(xún)屏幕的寬度屬性，根據(jù)不同的寬度加載不同的css文件。
有時(shí)候我們?yōu)榱藴p少css文件的解析，將所有的媒體查詢(xún)代碼寫(xiě)在同一個(gè)css文件中，在html中僅作一次加載。如下，
<head>
<link rel="stylesheet" href="style.css" />
</head>@media screen and (max-width: 480px) {
/* your css code */
}
@media screen and (min-width: 481px) and (max-width: 600px) {
/* your css code */
}
/* more css code */這兩種做法的效果是一致的。
下面是一些示例網(wǎng)站，可以訪(fǎng)問(wèn)它們，然后改變?yōu)g覽器的大小觀(guān)察其展示的變化。
- Hicksdesign，不同的屏幕大小將導(dǎo)致頁(yè)面的側(cè)欄發(fā)生變化。
- A List Apart，不同的屏幕大小將導(dǎo)致頁(yè)面導(dǎo)航欄和圖片行數(shù)發(fā)生變化。
- Colly，不同的屏幕大小將導(dǎo)致頁(yè)面圖片的分列不同。
自適應(yīng)布局的局限性
這里額外說(shuō)一點(diǎn)，所謂的自適應(yīng)布局遠(yuǎn)遠(yuǎn)沒(méi)有這么簡(jiǎn)單，并不是靠著在不同屏幕大小上對(duì)頁(yè)面布局做一些調(diào)整就可以了。
它還將面臨下面的幾個(gè)問(wèn)題，
- 不同屏幕尺寸下，圖片（視頻）等資源的展示如何處理
- 在較小的屏幕尺寸下，往往需要對(duì)一些元素進(jìn)行隱藏，這勢(shì)必會(huì)造成流量（帶寬資源）的浪費(fèi)
- 即使一套頁(yè)面可以自適應(yīng)好幾種設(shè)備了，此時(shí)一旦有更新，需要同時(shí)維護(hù)各個(gè)設(shè)備相關(guān)的css代碼并且要做好協(xié)調(diào)
- …
兼容性
IE8（及其以下都不支持）- IE9+
- Chrome 5+
- Opera 10+
- Firefox 3.6+
- Safari 4+
關(guān)于Media Query瀏覽器的兼容性，除了IE8及其以下的瀏覽器不支持，其他的主流瀏覽器基本上都支持（這里不考慮Firefox、Safari、Opera這些瀏覽器的低版本了）。要是實(shí)在要想在IE8上使用媒體查詢(xún)，需要用到引入額外的js插件css3-medieaqueries.js。
參考列表
- css3-mediaqueries
- 自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design）
- 什么是響應(yīng)式Web設(shè)計(jì)？怎樣進(jìn)行？
- CSS3 Media Queries 實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)
更多建議：