隨著科學技術不斷的向前發展，網頁的瀏覽終端越來越多樣化，用戶可以通過：寬屏電視、臺式電腦、筆記本電腦、平板電腦和智能手機來訪問你的網站。盡管你無法保證一個網站在不同屏幕尺寸和不同設備上看起來完全一模一樣，但至少要讓你的Web頁面能適配用戶的終端，讓他更好的呈現在你的用戶面前。在本節中，將會學到如何使用CSS3中的Media Queries模塊來讓一個頁面適應不同的終端（或屏幕尺寸），從而讓你的頁面讓用戶有一個更好的體驗。

Media Queries

Media Queries是CSS3新增加的一個模塊功能，其最大的特色就是通過CSS3來查詢媒體，然后調用對應的樣式。其實這個功能在CSS2.1中就有出現過，只不過那個時候此功能并不強大，我們最常見的就是給打印設備添加打印樣式。隨著時代的變化，這個模塊功能越來越強大。

在徹底的了解Media Queries我們需要了解其中的兩個重要部分，第一個是媒體類型，第二個是媒體特性。下面的內容我們簡單的來了解這兩個部分：

一、媒體類型

媒體類型（Media Type）在CSS2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的設備指定不同的樣式。

在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(頁面打印或打印預覽模式)，其實媒體類型遠不止這三種，W3C總共列出了10種媒體類型。如下表所示：

其中Screen、All和Print為最常見的三種媒體類型。