標籤：
隨著科學技術不斷的向前發展，網頁的瀏覽終端越來越多樣化，使用者可以通過：寬屏電視、台式電腦、膝上型電腦、平板電腦和智能手機來 訪問你的網站。儘管你無法保證一個網站在不同螢幕尺寸和不同裝置上看起來完全一模一樣，但至少要讓你的Web頁面能適配使用者的終端，讓他更好的呈現在你的 使用者面前。在本節中，將會學到如何使用CSS3中的Media Queries模組來讓一個頁面適應不同的終端（或螢幕尺寸），從而讓你的頁面讓使用者有一個更好的體驗。
Media Queries
Media Queries是CSS3新增加的一個模組功能，其最大的特色就是通過CSS3來查詢媒體，然後調用對應的樣式。其實這個功能在CSS2.1中就有出現 過，只不過那個時候此功能並不強大，我們最常見的就是給列印裝置添加列印樣式。隨著時代的變化，這個模組功能越來越強大。
在徹底的瞭解Media Queries我們需要瞭解其中的兩個重要部分，第一個是媒體類型，第二個是媒體特性。下面的內容我們簡單的來瞭解這兩個部分：
一、媒體類型
媒體類型（Media Type）在CSS2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的裝置指定不同的樣式。
在CSS2中常碰到的就是all(全部)、screen(螢幕)、print(頁面列印或預覽列印模式)，其實媒體類型遠不止這三種，W3C總共列出了10種媒體類型。如下表所示：
值 |
裝置類型 |
All |
所有裝置 |
Braille |
盲人用點字法觸覺回饋裝置 |
Embossed |
盲文印表機 |
Handheld |
可攜式裝置 |
列印用紙或預覽列印視圖 |
|
Projection |
各種投影裝置 |
Screen |
電腦顯示器 |
Speech |
語音或音頻合成器 |
Tv |
電視機類型裝置 |
Tty |
使用固定密度字母柵格的媒介，比如電傳打字機和終端 |
其中Screen、All和Print為最常見的三種媒體類型。
在實際中媒體類型有近十種之多，實際之中常用的也就那麼幾種，不過媒體類型的引用方法也有多種，常見的有：link標籤、@import和CSS3新增的@media幾種：
link方法
link方法引入媒體類型其實就是在<link>標籤引用樣式的時候，通過link標籤中的media屬性來指定不同的媒體類型。如下所示。
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />
@import方法
@import可以引用樣式檔案，同樣也可以用來引用媒體類型。@import引入媒體類型主要有兩種方式，一種是在樣式中通過@import調用 另一個樣式檔案；另一種方法是在<head></head>標籤中的<style></style>中 引入，但這種使用方法在IE6~7都不被支援，如樣式檔案中調用另一個樣式檔案時，就可以指定對應的媒體類型。
@importurl(reset.css) screen; @importurl(print.css) print;
在<head>中的<style>標籤中引入媒體類型方法。
<head><style type="text/css"> @importurl(style.css) all;</style></head>
@media方法
@media是CSS3中新引進的一個特性，被稱為媒體查詢。在頁面中也可以通過這個屬性來引入媒體類型。@media引入媒體類型和@import有點類似也具有兩方式。
（1）在樣式檔案中引用媒體類型：
@media screen { 選取器{/*你的樣式代碼寫在這裡…*/}}
（2）使用@media引入媒體類型的方式是在<head>標籤中的<style>中引用。
<head><style type="text/css"> @media screen{ 選取器{/*你的樣式代碼寫在這裡…*/}}</style></head>
Media Queries使用方法
瞭解完這些概念性的東西，同學們最想知道的是Media Queries要如何使用？下面我們一起來探討其使用方法：
Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端裝置下達到不同的渲染效果。前面簡單的介紹了Media Queries如何引用到項目中，但Media Queries有其自己的使用規則。具體來說,Media Queries的使用方法如下。
@media 媒體類型and （媒體特性）{你的樣式}
注意：使用Media Queries必須要使用“@media”開頭，然後指定媒體類型（也可以稱為裝置類型），隨後是指定媒體特性（也可以稱之為裝置特性）。媒體特性的書寫 方式和樣式的書寫方式非常相似，主要分為兩個部分，第一個部分指的是媒體特性，第二部分為媒體特性所指定的值，而且這兩個部分之間使用冒號分隔。例如：
(max-width: 480px)
從前面表中可以得知，主要有十種媒體類型和13種媒體特性，將其組合就類似於不同的CSS集合。但與CSS屬性不同的是，媒體特性是通過 min/max來表示大於等於或小於做為邏輯判斷，而不是使用小於（<）和大於（>）這樣的符號來判斷。接下來一起來看看Media Queries在實際項目中常用的方式。
1. 最大寬度max-width
“max-width”是媒體特性中最常用的一個特性，其意思是指媒體類型小於或等於指定的寬度時，樣式生效。如：
@media screen and (max-width:480px){ .ads { display:none; }}
上面表示的是：當螢幕小於或等於480px時,頁面中的廣告區塊（.ads）都將被隱藏。
2.最小寬度min-width“min-width”與“max-width”相反，指的是媒體類型大於或等於指定寬度時，樣式生效。
@media screen and (min-width:900px){.wrapper{width: 980px;}}
上面表示的是：當螢幕大於或等於900px時，容器“.wrapper”的寬度為980px。
3.多個媒體特性使用Media Queries可以使用關鍵詞"and"將多個媒體特性結合在一起。也就是說，一個Media Query中可以包含0到多個運算式，運算式又可以包含0到多個關鍵字，以及一種媒體類型。
當螢幕在600px~900px之間時，body的背景色渲染為“#f5f5f5”，如下所示。
@media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;}}
4.裝置螢幕的輸出寬度Device Width
在智慧型裝置上，例如iPhone、iPad等，還可以根據螢幕裝置的尺寸來設定相應的樣式（或者調用相應的樣式檔案）。同樣的，對於螢幕裝置同樣可以使用“min/max”對應參數，如“min-device-width”或者“max-device-width”。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />
上面的代碼指的是“iphone.css”樣式適用於最大裝置寬度為480px，比如說iPhone上的顯示，這裡的“max-device-width”所指的是裝置的實際解析度，也就是指可視面積解析度。
5. not關鍵詞使用關鍵詞“not”是用來排除某種制定的媒體類型，也就是用來排除符合運算式的裝置。換句話說，not關鍵詞表示對後面的運算式執行取反操作，如：
@media not print and (max-width: 1200px){樣式代碼}
上面代碼錶示的是：樣式代碼將被使用在除列印裝置和裝置寬度小於1200px下所有裝置中。
6.only關鍵詞only用來指定某種特定的媒體類型，可以用來排除不支援媒體查詢的瀏覽器。其實only很多時候是用來對那些不支援Media Query但卻支援Media Type的裝置隱藏樣式表的。其主要有：支援媒體特性的裝置，正常調用樣式，此時就當only不存在；表示不支援媒體特性但又支援媒體類型的裝置，這樣就 會不讀樣式，因為其先會讀取only而不是screen；另外不支援Media Queries的瀏覽器，不論是否支援only，樣式都不會被採用。如
<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
在Media Query中如果沒有明確指定Media Type，那麼其預設為all，如：
<linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />
另外在樣式中，還可以使用多條語句來將同一個樣式應用於不同的媒體類型和媒體特性中，指定方式如下所示。
<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小於或等於480px的手持功能上，或者被用於螢幕寬度大於或等於960px的裝置上。
到目前為止，CSS3 Media Queries得到了眾多瀏覽器支援，除了IE6-8瀏覽器不支援之外，在所有現代瀏覽器中都可以完美支援。還有一個與眾不同的時，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加首碼。
Media Queries ---- 媒體查詢 @media
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
