首先要知道，我們?yōu)槭裁匆獙懽赃m應(yīng)的頁面（響應(yīng)式頁面）

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

CSS3 的 @media 查詢

定義和使用

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

CSS 語法

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

媒體類型（mediaType ）

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

媒體功能（media feature）

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

開始編寫響應(yīng)式頁面

編寫之前呢，有幾個(gè)要準(zhǔn)備的工作

準(zhǔn)備工作1：設(shè)置Meta標(biāo)簽

首先我們?cè)谑褂?@media 的時(shí)候需要先設(shè)置下面這段代碼，來兼容移動(dòng)設(shè)備的展示效果：

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

這段代碼的幾個(gè)參數(shù)解釋：

1. width = device-width：寬度等于當(dāng)前設(shè)備的寬度
2. initial-scale：初始的縮放比例（默認(rèn)設(shè)置為1.0，即代表不縮放）
3. user-scalable：用戶是否可以手動(dòng)縮放（默認(rèn)設(shè)置為no，因?yàn)槲覀儾幌Ｍ脩舴糯罂s小頁面）

其他還有很多參數(shù)呢，想要了解的童鞋可以直接去百度

準(zhǔn)備工作2：加載兼容文件JS

因?yàn)镮E8既不支持HTML5也不支持CSS3 @media ，所以我們需要加載兩個(gè)JS文件，來保證我們的代碼實(shí)現(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]-->

準(zhǔn)備工作3：設(shè)置IE渲染方式默認(rèn)為最高(可選)

現(xiàn)在有很多人的IE瀏覽器都升級(jí)到IE9以上了，所以這個(gè)時(shí)候就有又很多詭異的事情發(fā)生了，例如現(xiàn)在是IE9的瀏覽器，但是瀏覽器的文檔模式卻是IE8 為了防止這種情況，我們需要下面這段代碼來讓IE的文檔渲染模式永遠(yuǎn)都是最新的

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

這段代碼后面加了一個(gè)chrome=1，如果用戶的電腦里安裝了 chrome，就可以讓電腦里面的IE不管是哪個(gè)版本的都可以使用Webkit引擎及V8引擎進(jìn)行排版及運(yùn)算，如果沒有安裝，就顯示IE最新的渲染模式。

代碼實(shí)例

1、如果文檔寬度小于等于 300px 則應(yīng)用花括號(hào)內(nèi)的樣式——修改body的背景顏色(background-color):

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

從上面的代碼可以看出，媒體類型是屏幕（screen），使用 一個(gè) and 連接后面的媒體功能，這里寫的是 max-width:300px ，也就是說，當(dāng)屏幕的最大寬度 小于等于 300px 的時(shí)候，就應(yīng)用花括號(hào)里面的樣式。 2、當(dāng)文檔寬度大于等于300px 的時(shí)候顯示的樣式

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

注意，這里的媒體功能使用的是 min-width 而不是 max-width，我已經(jīng)標(biāo)紅高亮顯示出來了。 3、當(dāng)文檔寬度大于等于 300px 并且小于等于500px 的時(shí)候顯示的樣式

注意，這里使用了兩個(gè) and ，用來連接 兩個(gè)媒體功能，一個(gè)用于限制最小，一個(gè)用于限制最大。

※ 需要注意的地方（劃重點(diǎn)）

1、通過靈活應(yīng)用以上技巧，開發(fā)出一個(gè)響應(yīng)式頁面，還不是近在咫尺的感覺_(:з」∠)_ 2、不要被 min-width 和 max-width 所迷惑，初學(xué)者很容易誤以為 min-width 的意思是小于xxx的時(shí)候才應(yīng)用，然而這就陷入誤區(qū)了，其實(shí)它的意思是：當(dāng)設(shè)置了 min-width 的時(shí)候，文檔的寬度如果小于設(shè)置的值，就不會(huì)應(yīng)用這個(gè)區(qū)塊里的CSS樣式，所以 min-width 它才能實(shí)現(xiàn)大于等于設(shè)置的值得時(shí)候，才會(huì)應(yīng)用區(qū)塊里的CSS樣式，max-width 也是如此。 3、或者這樣想想，先看代碼，這句代碼的意思是大于等于 300px ，小于等于 500px的時(shí)候應(yīng)用樣式

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

min-width:300px 的作用是當(dāng)文檔寬度不小于 300px 的時(shí)候就應(yīng)用 {} 里的CSS代碼塊，即大于等于 300px max-width:500px 的作用是當(dāng)文檔寬度不大于 500px 的時(shí)候就應(yīng)用{} 里的CSS代碼塊，即小于等于 500px 是不是這樣想就容易明白了些呢？ 4、這里有個(gè)彎很難繞過來，自己多動(dòng)手做做實(shí)驗(yàn)，多動(dòng)腦想想，就豁然開朗了。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論