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