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

【直接看乾貨】

定義和使用使用 @media 查詢，你可以針對不同的螢幕大小定義不同的樣式。@media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對除錯來說是乙個極大的便利。

css 語法

@media mediatype and|not|only (media feature)

**型別（mediatype ）型別有很多，在這裡不一一列出來了，只列出了常用的幾個。

值描述all用於所有裝置

用於印表機和列印預覽

screen

用於電腦螢幕，平板電腦，智慧型手機等。（最常用）

speech

應用於螢幕閱讀器等發聲裝置

**功能（media feature） **功能也有很多，以下列出常用的幾個值描述

max-width

定義輸出裝置中的頁面最大可見區域寬度

min-width

定義輸出裝置中的頁面最小可見區域寬度

編寫之前呢，有幾個要準備的工作

準備工作1：設定meta標籤

首先我們在使用 @media 的時候需要先設定下面這段**，來相容移動裝置的展示效果：

這段**的幾個引數解釋：

其他還有很多引數呢，想要了解的童鞋可以直接去

準備工作2：載入相容檔案js

因為ie8既不支援html5也不支援css3 @media ，所以我們需要載入兩個js檔案，來保證我們的**實現相容效果：

準備工作3：設定ie渲染方式預設為最高(可選)

現在有很多人的ie瀏覽器都公升級到ie9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是ie9的瀏覽器，但是瀏覽器的文件模式卻是ie8為了防止這種情況，我們需要下面這段**來讓ie的文件渲染模式永遠都是最新的

這段**後面加了乙個chrome=1，如果使用者的電腦裡安裝了 chrome，就可以讓電腦裡面的ie不管是哪個版本的都可以使用webkit引擎及v8引擎進行排版及運算，如果沒有安裝，就顯示ie最新的渲染模式。

**例項

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

@media screen and (max-width: 300px) 
}

從上面的**可以看出，**型別是螢幕（screen），使用乙個and連線後面的**功能，這裡寫的是max-width:300px，也就是說，當螢幕的最大寬度小於等於 300px的時候，就應用花括號裡面的樣式。2、當文件寬度大於等於300px 的時候顯示的樣式

@media screen and (min-width: 300px)
}

注意，這裡的**功能使用的是 min-width 而不是 max-width，我已經標紅高亮顯示出來了。3、當文件寬度大於等於 300px 並且小於等於500px 的時候顯示的樣式

@media screen and (min-width: 300px) and (max-width: 500px) 
}

注意，這裡使用了兩個 and ，用來連線兩個**功能，乙個用於限制最小，乙個用於限制最大。

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

1、通過靈活應用以上技巧，開發出乙個響應式頁面，還不是近在咫尺的感覺_(:з」∠)_2、不要被 min-width 和 max-width 所迷惑，初學者很容易誤以為 min-width 的意思是小於***的時候才應用，然而這就陷入誤區了，其實它的意思是：當設定了min-width 的時候，文件的寬度如果小於設定的值，就不會應用這個區塊裡的css樣式，所以 min-width 它才能實現大於等於設定的值得時候，才會應用區塊裡的css樣式，max-width 也是如此。3、或者這樣想想，先看**，這句**的意思是大於等於 300px ，小於等於 500px的時候應用樣式

@media screen and (min-width:300px) and (max-width:500px)

min-width:300px的作用是當文件寬度不小於

300px 的時候就應用 {} 裡的css**塊，即大於等於 300pxmax-width:500px的作用是當文件寬度不大於500px 的時候就應用{} 裡的css**塊，即小於等於 500px是不是這樣想就容易明白了些呢？4、這裡有個彎很難繞過來，自己多動手做做實驗，多動腦想想，就豁然開朗了。

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

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

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

使用CSS3的 media來實現網頁自適應

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

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

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

使用CSS3的 media來實現網頁自適應

相關推薦