使用CSS3的@media來編寫響應式的頁面

首先要知道，咱們爲何要寫自適應的頁面（響應式頁面）

【直接看乾貨】

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

CSS3 的 @media 查詢

定義和使用

使用 @media 查詢，你能夠針對不一樣的屏幕大小定義不一樣的樣式。 @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。 當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面，這對調試來講是一個極大的便利。

CSS 語法

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

媒體類型（mediaType ）

類型有不少，在這裏不一一列出來了，只列出了經常使用的幾個。

值	描述
all	用於全部設備
print	用於打印機和打印預覽
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最新的渲染模式。

代碼實例

一、若是文檔寬度小於等於 300px 則應用花括號內的樣式——修改body的背景顏色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

從上面的代碼能夠看出，媒體類型是 屏幕（screen），使用 一個 and 鏈接後面的媒體功能，這裏寫的是 max-width:300px ，也就是說，當屏幕的 最大寬度 小於等於 300px 的時候，就應用花括號裏面的樣式。

 

二、當文檔寬度大於等於300px 的時候顯示的樣式

@media screen and (min-width: 300px){
    body {
        background-color:lightblue;
    }
}

注意，這裏的媒體功能使用的是 min-width 而不是 max-width，我已經標紅高亮顯示出來了。

 

三、當文檔寬度大於等於 300px 而且小於等於500px （ width >=300 && width <=500）的時候顯示的樣式

@media screen and (min-width:300px) and (max-width:500px) {
    /* CSS 代碼 */
}

注意，這裏使用了兩個 and ，用來鏈接 兩個媒體功能，一個用於限制最小，一個用於限制最大。

---

※ 須要注意的地方（劃重點）

一、經過靈活應用以上技巧，開發出一個響應式頁面，還不是近在咫尺的感受_(:з」∠)_

二、不要被 min-width 和 max-width 所迷惑，初學者很容易誤覺得 min-width 的意思是小於xxx的時候才應用，然而這就陷入誤區了，其實它的意思是：當設置了 min-width 的時候，文檔的寬度若是小於設置的值，就不會應用這個區塊裏的CSS樣式，因此 min-width 它才能實現大於等於設置的值得時候，纔會應用區塊裏的CSS樣式，max-width 也是如此。

三、或者這樣想一想，先看代碼，這句代碼的意思是寬度大於等於 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 是否是這樣想就容易明白了些呢？

四、這裏有個彎很難繞過來，本身多動手作作實驗，多動腦想一想，就豁然開朗了。