首先要知道，我們為什么要寫自適應的頁面（響應式頁面）

眾所周知，電腦、平板、手機的屏幕是差距很大的，假如在電腦上寫好了一個頁面，在電腦上看起來不錯，但是如果放到手機上的話，那可能就會亂的一塌糊涂，這時候怎么解決呢？以前，可以再專門為手機定制一個頁面，當用戶訪問的時候，判斷設備是手機還是電腦，如果是手機就跳轉到相應的手機頁面，例如百度的就是，手機訪問www.baidu.com就會跳轉到m.baidu.com，這樣做簡直就是費力不討好的活，所以聰明的程序員開發了一種自適應寫法，即一次開發，處處顯示！這到底是一個什么樣的神器東西呢，接下來就揭曉它的神秘面紗。

CSS3 的 @media 查詢

定義和使用

使用 @media 查詢，你可以針對不同的屏幕大小定義不同的樣式。 @media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對調試來說是一個極大的便利。

CSS 語法

@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}

媒體類型（mediaType ）

類型有很多，在這里不一一列出來了，只列出了常用的幾個。

媒體功能（media feature）

媒體功能也有很多，以下列出常用的幾個

開始編寫響應式頁面

編寫之前呢，有幾個要準備的工作

準備工作1：設置Meta標簽

首先我們在使用 @media 的時候需要先設置下面這段代碼，來兼容移動設備的展示效果：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

這段代碼的幾個參數解釋：

width = device-width：寬度等于當前設備的寬度
initial-scale：初始的縮放比例（默認設置為1.0，即代表不縮放）