首先要知道邪媳，我們?yōu)槭裁匆獙懽赃m應的頁面（響應式頁面）
眾所周知梢卸，電腦窑多、平板烟央、手機的屏幕是差距很大的，假如在電腦上寫好了一個頁面瞒渠，在電腦上看起來不錯良蒸，但是如果放到手機上的話，那可能就會亂的一塌糊涂伍玖，這時候怎么解決呢嫩痰？以前，可以再專門為手機定制一個頁面窍箍，當用戶訪問的時候串纺，判斷設備是手機還是電腦，如果是手機就跳轉(zhuǎn)到相應的手機頁面椰棘，例如百度的就是纺棺，手機訪問www.baidu.com就會跳轉(zhuǎn)到m.baidu.com，這樣做簡直就是費力不討好的活邪狞，所以聰明的程序員開發(fā)了一種自適應寫法祷蝌，即一次開發(fā)，處處顯示帆卓！這到底是一個什么樣的神器東西呢巨朦，接下來就揭曉它的神秘面紗。
CSS3 的 @media 查詢
定義和使用
使用 @media 查詢剑令，你可以針對不同的屏幕大小定義不同的樣式糊啡。 @media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面吁津，@media 是非常有用的棚蓄。 當你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面，這對調(diào)試來說是一個極大的便利梭依。
css語法
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
媒體類型（mediaType ）
類型有很多挣柬，在這里不一一列出來了，只列出了常用的幾個睛挚。
| 值 | 描述 |
|---|---|
| all | 用于所有設備 |
| 用于打印機和打印預覽 | |
| screen | 用于電腦屏幕，平板電腦急黎，智能手機等扎狱。（最常用） |
| speech | 應用于屏幕閱讀器等發(fā)聲設備 |
媒體功能（media feature）
媒體功能也有很多，以下列出常用的幾個
| 值 | 描述 |
|---|---|
| max-width | 定義輸出設備中的頁面最大可見區(qū)域?qū)挾?/td> |
| min-width | 定義輸出設備中的頁面最小可見區(qū)域?qū)挾?/td> |
and勃教、not淤击、only關鍵字的意義
1.and
Media Queries可以使用關鍵詞"and"將多個媒體特性結(jié)合在一起。也就是說故源，一個Media Query中可以包含0到多個表達式污抬，表達式又可以包含0到多個關鍵字，以及一種媒體類型绳军。
當屏幕在600px~900px之間時印机，body的背景色渲染為“#f5f5f5”，如下所示门驾。
@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}
- not關鍵詞
使用關鍵詞“not”是用來排除某種制定的媒體類型射赛，也就是用來排除符合表達式的設備。換句話說奶是，not關鍵詞表示對后面的表達式執(zhí)行取反操作楣责，如：
@media not print and (max-width: 1200px){樣式代碼}
上面代碼表示的是：樣式代碼將被使用在除打印設備和設備寬度小于1200px下所有設備中。
3.only關鍵詞
only用來指定某種特定的媒體類型聂沙，可以用來排除不支持媒體查詢的瀏覽器秆麸。其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。其主要有：支持媒體特性的設備及汉，正常調(diào)用樣式沮趣，此時就當only不存在；表示不支持媒體特性但又支持媒體類型的設備豁生，這樣就會不讀樣式兔毒，因為其先會讀取only而不是screen；另外不支持Media Queries的瀏覽器甸箱，不論是否支持only育叁，樣式都不會被采用。如
<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />
在Media Query中如果沒有明確指定Media Type芍殖，那么其默認為all豪嗽，如：
<linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />
另外在樣式中，還可以使用多條語句來將同一個樣式應用于不同的媒體類型和媒體特性中，指定方式如下所示龟梦。
<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px),
screen and (min-width:960px)" />
上面代碼中style.css樣式被用在寬度小于或等于480px的手持設備上隐锭，或者被用于屏幕寬度大于或等于960px的設備上。
到目前為止计贰，CSS3 Media Queries得到了眾多瀏覽器支持钦睡，除了IE6-8瀏覽器不支持之外，在所有現(xiàn)代瀏覽器中都可以完美支持躁倒。還有一個與眾不同的是荞怒，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。
開始編寫響應式頁面
編寫之前呢秧秉，有幾個要準備的工作
準備工作1：設置Meta標簽
首先我們在使用 @media 的時候需要先設置下面這段代碼褐桌，來兼容移動設備的展示效果：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
這段代碼的幾個參數(shù)解釋：
- width = device-width：寬度等于當前設備的寬度
- initial-scale：初始的縮放比例（默認設置為1.0，即代表不縮放）
- user-scalable：用戶是否可以手動縮放（默認設置為no象迎，因為我們不希望用戶放大縮小頁面）
其他還有很多參數(shù)呢荧嵌，想要了解的童鞋可以直接去百度
準備工作2：加載兼容文件JS
因為IE8既不支持HTML5也不支持CSS3 @media ，所以我們需要加載兩個JS文件砾淌，來保證我們的代碼實現(xiàn)兼容效果：
<!--[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渲染方式默認為最高(可選)
現(xiàn)在有很多人的IE瀏覽器都升級到IE9以上了啦撮，所以這個時候就有又很多詭異的事情發(fā)生了，例如現(xiàn)在是IE9的瀏覽器汪厨，但是瀏覽器的文檔模式卻是IE8 為了防止這種情況逻族，我們需要下面這段代碼來讓IE的文檔渲染模式永遠都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
這段代碼后面加了一個chrome=1骄崩，如果用戶的電腦里安裝了 chrome聘鳞，就可以讓電腦里面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算，如果沒有安裝要拂，就顯示IE最新的渲染模式抠璃。
代碼實例
1、如果文檔寬度小于等于 300px 則應用花括號內(nèi)的樣式——修改body的背景顏色
(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
從上面的代碼可以看出脱惰，媒體類型是屏幕（screen）搏嗡，使用 一個 and 連接后面的媒體功能，這里寫的是 max-width:300px 拉一，也就是說采盒，當屏幕的最大寬度 小于等于 300px 的時候，就應用花括號里面的樣式蔚润。
2磅氨、當文檔寬度大于等于300px 的時候顯示的樣式
@media screen and (min-width: 300px){
body {
background-color:lightblue;
}
}
注意，這里的媒體功能使用的是 min-width 而不是 max-width嫡纠，我已經(jīng)標紅高亮顯示出來了烦租。
3延赌、當文檔寬度大于等于 300px 并且小于等于500px （ width >=300 && width <=500）的時候顯示的樣式
@media screen and (min-width:300px) and (max-width:500px) {
/* CSS 代碼 */
}
注意，這里使用了兩個 and 叉橱，用來連接 兩個媒體功能挫以，一個用于限制最小，一個用于限制最大窃祝。
※ 需要注意的地方（劃重點）
1掐松、通過靈活應用以上技巧，開發(fā)出一個響應式頁面粪小，還不是近在咫尺的感覺(:з」∠)
2甩栈、不要被 min-width 和 max-width 所迷惑，初學者很容易誤以為 min-width 的意思是小于xxx的時候才應用糕再，然而這就陷入誤區(qū)了，其實它的意思是：當設置了 min-width 的時候玉转，文檔的寬度如果小于設置的值突想，就不會應用這個區(qū)塊里的CSS樣式，所以 min-width 它才能實現(xiàn)大于等于設置的值得時候究抓，才會應用區(qū)塊里的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 是不是這樣想就容易明白了些呢擅腰？
參考：https://www.cnblogs.com/baiyii/p/6973437.html
https://www.cnblogs.com/zyl-Tara/p/5519144.html
