使用 @media 查詢，你可以針對不同的螢幕大小定義不同的樣式。 @media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對除錯來說是乙個極大的便利。
@media mediatype and|not|only (media feature)
**型別（mediatype ） 型別有很多，在這裡不一一列出來了，只列出了常用的幾個。
media feature：
1.max-width:定義輸出裝置中的頁面最大可見區域寬度
2.min-width:定義輸出裝置中的頁面最小可見區域寬度
準備工作1：設定meta標籤
首先我們在使用 @media 的時候需要先設定下面這段**，來相容移動裝置的展示效果：
這段**的幾個引數解釋：
width = device-width：寬度等於當前裝置的寬度
initial-scale：初始的縮放比例（預設設定為1.0，即代表不縮放）
user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）
準備工作2：載入相容檔案js
因為ie8既不支援html5也不支援css3 @media ，所以我們需要載入兩個js檔案，來保證我們的**實現相容效果：
準備工作3：設定ie渲染方式預設為最高(可選) 現在有很多人的ie瀏覽器都公升級到ie9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是ie9的瀏覽器，但是瀏覽器的文件模式卻是ie8 為了防止這種情況，我們需要下面這段**來讓ie的文件渲染模式永遠都是最新的
ps:這段**後面加了乙個chrome=1，如果使用者的電腦裡安裝了 chrome，就可以讓電腦裡面的ie不管是哪個版本的都可以使用webkit引擎及v8引擎進行排版及運算，如果沒有安裝，就顯示ie最新的渲染模式。
**示例：
1、如果文件寬度大於等於 1170px 則應用花括號內的樣式——修改body的背景顏色(background-color):
@media screen and (min-width: 1170px)}
從上面的**可以看出，**型別是螢幕（screen），使用 乙個 and 連線後面的**功能，這裡寫的是 max-width:300px ，也就是說，當螢幕的最大寬度 大於於等於 1170px 的時候，就應用花括號裡面的樣式。
2.如果文件寬度大於等於 992px 則應用花括號內的樣式——修改body的背景顏色(background-color):
@media screen and (min-width: 992px)}
3、當文件寬度大於等於 768px 並且小於等於992px （ width >=768 && width <=992）的時候顯示的樣式
@media screen and (min-width:768px) and (max-width:992px)
需要注意的是：
不要被 min-width 和 max-width 所迷惑，初學者很容易誤以為 min-width 的意思是小於***的時候才應用，然而這就陷入誤區了，其實它的意思是：當設定了 min-width 的時候，文件的寬度如果小於設定的值，就不會應用這個區塊裡的css樣式，所以 min-width 它才能實現大於等於設定的值得時候，才會應用區塊裡的css樣式，max-width 也是如此。
使用 @media 查詢，你可以針對不同的螢幕大小定義不同的樣式。 @media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，@media 是非常有用的。 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對除錯來說是乙個極大的便利。
@media mediatype and|not|only (media feature)
**型別（mediatype ） 型別有很多，在這裡不一一列出來了，只列出了常用的幾個。
media feature：
1.max-width:定義輸出裝置中的頁面最大可見區域寬度
2.min-width:定義輸出裝置中的頁面最小可見區域寬度
準備工作1：設定meta標籤
首先我們在使用 @media 的時候需要先設定下面這段**，來相容移動裝置的展示效果：
這段**的幾個引數解釋：
width = device-width：寬度等於當前裝置的寬度
initial-scale：初始的縮放比例（預設設定為1.0，即代表不縮放）
user-scalable：使用者是否可以手動縮放（預設設定為no，因為我們不希望使用者放大縮小頁面）
準備工作2：載入相容檔案js
因為ie8既不支援html5也不支援css3 @media ，所以我們需要載入兩個js檔案，來保證我們的**實現相容效果：
準備工作3：設定ie渲染方式預設為最高(可選) 現在有很多人的ie瀏覽器都公升級到ie9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是ie9的瀏覽器，但是瀏覽器的文件模式卻是ie8 為了防止這種情況，我們需要下面這段**來讓ie的文件渲染模式永遠都是最新的
ps:這段**後面加了乙個chrome=1，如果使用者的電腦裡安裝了 chrome，就可以讓電腦裡面的ie不管是哪個版本的都可以使用webkit引擎及v8引擎進行排版及運算，如果沒有安裝，就顯示ie最新的渲染模式。
**示例：
1、如果文件寬度大於等於 1170px 則應用花括號內的樣式——修改body的背景顏色(background-color):
@media screen and (min-width: 1170px)}
從上面的**可以看出，**型別是螢幕（screen），使用 乙個 and 連線後面的**功能，這裡寫的是 max-width:300px ，也就是說，當螢幕的最大寬度 大於於等於 1170px 的時候，就應用花括號裡面的樣式。
2.如果文件寬度大於等於 992px 則應用花括號內的樣式——修改body的背景顏色(background-color):
@media screen and (min-width: 992px)}
3、當文件寬度大於等於 768px 並且小於等於992px （ width >=768 && width <=992）的時候顯示的樣式
@media screen and (min-width:768px) and (max-width:992px)
需要注意的是：
不要被 min-width 和 max-width 所迷惑，初學者很容易誤以為 min-width 的意思是小於***的時候才應用，然而這就陷入誤區了，其實它的意思是：當設定了 min-width 的時候，文件的寬度如果小於設定的值，就不會應用這個區塊裡的css樣式，所以 min-width 它才能實現大於等於設定的值得時候，才會應用區塊裡的css樣式，max-width 也是如此。
media響應式布局模版
列印樣式 media print 手機等小螢幕手持裝置 media screen and min width 320px and max width 480px 平板之類的寬度 1024 以下裝置 media only screen and min width 321px and max width...
響應式布局 media詳解
語法 media 型別及功能 指定 查詢使用的 特性。這類似於css屬性，如 max width 960px。css3 說明 指定樣式表規則用於指定的 型別和查詢條件。ie8及以下只能實現css2中的部分，即只可以設定 型別。查詢可以被用在css中的 media和 import規則上，也可以被用在h...
響應式布局的實現 media
好久沒寫響應式頁面了，這個是之前公司的乙個專案。今天開啟了設計文件，按照設計文件的要求大體做了一下。當然裡面是存在細節問題的。如圖 基礎講解見我另一篇部落格 這個效果如何實現呢？當然首選的就是 查詢 media 了 查詢應當怎麼寫呢？css樣式分為 內聯式css樣式 嵌入式css樣式 外部式css樣...