首先要知道，我們為什么要寫自適應的頁面（響應式頁面）
眾所周知，電腦、平板、手機的屏幕是差距很大的，假如在電腦上寫好了一個頁面，在電腦上看起來不錯，但是如果放到手機上的話，那可能就會亂的一塌糊涂，這時候怎么解決呢？以前，可以再專門為手機定制一個頁面，當用戶訪問的時候，判斷設備是手機還是電腦，如果是手機就跳轉到相應的手機頁面，例如百度的就是，手機訪問www.baidu.com就會跳轉到m.baidu.com，這樣做簡直就是費力不討好的活，所以聰明的程序員開發了一種自適應寫法，即一次開發，處處顯示！這到底是一個什么樣的神器東西呢，接下來就揭曉它的神秘面紗。
CSS3 的 @media 查詢
定義和使用
使用 @media 查詢，你可以針對不同的屏幕大小定義不同的樣式。 @media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對調試來說是一個極大的便利。
CSS 語法
| @media mediaType and|not|only (media feature) { /*CSS-Code;*/} |
媒體類型（mediaType ）
類型有很多，在這里不一一列出來了，只列出了常用的幾個。
| 值 | 描述 |
|---|---|
| all | 用于所有設備 |
| 用于打印機和打印預覽 | |
| screen | 用于電腦屏幕，平板電腦，智能手機等。（最常用） |
| speech | 應用于屏幕閱讀器等發聲設備 |
媒體功能（media feature）
媒體功能也有很多，以下列出常用的幾個
| 值 | 描述 |
|---|---|
| max-width | 定義輸出設備中的頁面最大可見區域寬度 |
| min-width | 定義輸出設備中的頁面最小可見區域寬度 |
開始編寫響應式頁面
編寫之前呢，有幾個要準備的工作
準備工作1：設置Meta標簽
首先我們在使用 @media 的時候需要先設置下面這段代碼，來兼容移動設備的展示效果：
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
