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