Media Queries——媒體類型
隨著科學技術不斷的向前發展，網頁的瀏覽終耑越來越多樣化，用戶可以通過：寬屏電視、台式電腦、筆記本電腦、平板電腦和智能手機來訪問你的網站。盡管你無法保证一個網站在不同屏幕尺寸和不同設備上看起來完全一模一樣，但至少要讓你的Web頁面能適配用戶的終耑，讓他更好的呈現在你的用戶面前。在本節中，將會學到如何使用CSS3中的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>
