首先要知道，我們為什麼要寫自適應的頁面（響應式頁面）
眾所周知，電腦、平板、手機的螢幕是差距很大的，假如在電腦上寫好了乙個頁面，在電腦上看起來不錯，但是如果放到手機上的話，那可能就會亂的一塌糊塗，這時候怎麼解決呢？以前，可以再專門為手機定製乙個頁面，當使用者訪問的時候，判斷裝置是手機還是電腦，如果是手機就跳轉到相應的手機頁面，例如百度的就是，手機訪問www.baidu.com就會跳轉到m.baidu.com，這樣做簡直就是費力不討好的活，所以聰明的程式設計師開發了一種自適應寫法，即一次開發，處處顯示！這到底是乙個什麼樣的神器東西呢，接下來就揭曉它的神秘面紗。
css3 的 @media 查詢
定義和使用
使用 @media 查詢，你可以針對不同的螢幕大小定義不同的樣式。 @media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對除錯來說是乙個極大的便利。
css 語法
@media medi and|not|only (media feature)
**型別（mediatype ）
型別有很多，在這裡不一一列出來了，只列出了常用的幾個。值描述
all用於所有裝置
用於印表機和列印預覽
screen
用於電腦螢幕，平板電腦，智慧型手機等。（最常用）
speech
應用於螢幕閱讀器等發聲裝置
**功能（media feature）
**功能也有很多，以下列出常用的幾個
程式設計客棧 值
描述max-width
定義輸出裝置中的頁面最大可見區域寬度
min-width
定義輸出裝置中的頁面最小可見區域寬度
開始編寫響應式頁面
編寫之前呢，有幾個要準備的工作
準備工作1：設定meta標籤
首先我們在使用 @media 的時候需程式設計客棧要先設定下面這段**，來相容移動裝置的展示效果：
這段**的幾個引數解釋：
其他還有很多引數呢，想要了解的童鞋可以直接去百度
準備工作2：載入相容檔案js
因為ie8既不支援html5也不支援css3 @mewww.cppcns.comdia ，所以我們需要載入兩個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 的時候顯示的樣式
注意，這裡使用了兩個 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**塊，即大於等於 300px max-width:500px 的作用是當文件寬度不大於 500px 的時候就應用{} 裡的css**塊，即小於等於 500px 是不是這樣想就容易明白了些呢？ 4、這裡有個彎很難繞過來，自己多動手做做實驗，多動腦想想，就豁然開朗了。
本文標題: 詳解使用css3的@media來編寫響應式的頁面
本文位址:
使用CSS3的 media來實現網頁自適應
如今，電腦顯示器的螢幕解析度向越來越大發展，而手機等移動裝置終端的解析度卻不可能大到 去。越來越多的 開始讓自己的頁面自適合各種解析度，在小解析度下顯示基本的內容，在大解析度下顯示全部功能，甚至是分多等級的多版本。作為web前端開發人員需要知道並且會用這種知識。css2裡面雖然支援 media屬性，...
使用CSS3的 media來編寫響應式的頁面
直接看乾貨 定義和使用 使用 media 查詢，你可以針對不同的螢幕大小定義不同的樣式。media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對除錯來說是乙個極大的便...
使用CSS3的 media來編寫響應式的頁面
定義和使用 使用 media 查詢，你可以針對不同的螢幕大小定義不同的樣式。media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對除錯來說是乙個極大的便利。css ...