首先要知道，我們為什么要寫自適應的頁面（響應式頁面）
眾所周知，電腦、平板、手機的屏幕是差距很大的，假如在電腦上寫好了一個頁面，在電腦上看起來不錯，但是如果放到手機上的話，那可能就會亂的一塌糊塗，這時候怎么解決呢？以前，可以再專門為手機定制一個頁面，當用戶訪問的時候，判斷設備是手機還是電腦，如果是手機就跳轉到相應的手機頁面，例如百度的就是，手機訪問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">
這段代碼的幾個參數解釋：
- width = device-width：寬度等於當前設備的寬度
- initial-scale：初始的縮放比例（默認設置為1.0，即代表不縮放）
- user-scalable：用戶是否可以手動縮放（默認設置為no，因為我們不希望用戶放大縮小頁面）
其他還有很多參數呢，想要了解的童鞋可以直接去百度
准備工作2：加載兼容文件JS
因為IE8既不支持HTML5也不支持CSS3 @media ，所以我們需要加載兩個JS文件，來保證我們的代碼實現兼容效果：
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]-->
准備工作3：設置IE渲染方式默認為最高(可選)
現在有很多人的IE瀏覽器都升級到IE9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8 為了防止這種情況，我們需要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
這段代碼后面加了一個chrome=1，如果用戶的電腦里安裝了 chrome，就可以讓電腦里面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算，如果沒有安裝，就顯示IE最新的渲染模式。
代碼實例
1、如果文檔寬度小於等於 300px 則應用花括號內的樣式——修改body的背景顏色(background-color):
@media screen and (max-width: 300px) { body { background-color:lightblue; } }
@media screen and (min-width: 300px){ body { background-color:lightblue; } }
注意，這里的媒體功能使用的是 min-width 而不是 max-width，我已經標紅高亮顯示出來了。
@media screen and (min-width:300px) and (max-width:500px) { /* CSS 代碼 */ }
注意，這里使用了兩個 and ，用來連接 兩個媒體功能，一個用於限制最小，一個用於限制最大。
※ 需要注意的地方（划重點）
1、通過靈活應用以上技巧，開發出一個響應式頁面，還不是近在咫尺的感覺_(:з」∠)_
2、不要被 min-width 和 max-width 所迷惑，初學者很容易誤以為 min-width 的意思是小於xxx的時候才應用，然而這就陷入誤區了，其實它的意思是：當設置了 min-width 的時候，文檔的寬度如果小於設置的值，就不會應用這個區塊里的CSS樣式，所以 min-width 它才能實現大於等於設置的值得時候，才會應用區塊里的CSS樣式，max-width 也是如此。
3、或者這樣想想，先看代碼，這句代碼的意思是寬度大於等於 300px ，小於等於 500px （ width >=300 && width <=500）的時候應用樣式
@media screen and (min-width:300px) and (max-width:500px) { /* CSS 代碼 */ }
min-width:300px 的作用是當文檔寬度不小於 300px 的時候就應用 {} 里的CSS代碼塊，即大於等於 300px，max-width:500px 的作用是當文檔寬度不大於 500px 的時候就應用{} 里的CSS代碼塊，即小於等於 500px 是不是這樣想就容易明白了些呢？
4、這里有個彎很難繞過來，自己多動手做做實驗，多動腦想想，就豁然開朗了。