先看乙個簡單的例子：
3、（max-width:600px）：這個就是**特性，說得通俗一點就是**條件。
前面這個簡單的例項引出兩個概念性的東西，乙個就是**型別（media type）和**特性（media query），首先一起來理解一下這兩個概念：
**型別(media type)在css2中是乙個常見的屬性，也是乙個非常有用的屬性，可以通過**型別對不同的裝置指定不同的樣式，在css2中我們常碰到的就是all（全部）,screen（螢幕）,print（頁面列印或打邱預覽模式）,其實在**型別不止這三種，w3c總共列出了10種**型別。
**特性media query看成media type(判斷條件)+css(符合條件的樣式規則),為了更能理解media query，我們在次回到前面的例項上：
@media screen and (max-width: 600px)
}
常用的media query如下表所示：
相容的瀏覽器：
/*240px的寬度*/
/*360px的寬度*/
/*480px的寬度*/
其實only很多時候是用來對那些不支援media query但卻支援media type的裝置隱藏樣式表的。
其主要有：支援**特性（media queries）的裝置，正常呼叫樣式，此時就當only不存在；對於不支援**特性(media queries)但又支援**型別(media type)的裝置，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支援media qqueries的瀏覽器，不論是否支援only，樣式都不會被採用。
在media query中如果沒有明確指定media type，那麼其預設為all，如：
下面具體講解過程：
準備工作1：設定meta標籤
首先我們在使用media的時候需要先設定下面這段**，來相容移動裝置的展示效果：
準備工作2：載入相容檔案js
因為ie8既不支援html5也不支援css3 media，所以我們需要載入兩個js檔案，來保證我們的**實現相容效果：
現在有很多人的ie瀏覽器都公升級到ie9以上了，所以這個時候就有又很多詭異的事情發生了，例如現在是ie9的瀏覽器，但是瀏覽器的文件模式卻是ie8:
為了防止這種情況，我們需要下面這段**來讓ie的文件模式永遠都是最新的：
進入css3 media
一般寫法：
@media screen and (max-width: 960px)
}
@media (max-width: 960px)
}
下面的寫法是實現尺寸等於480px：
@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2)-webkit-min-device-pixel-ratio為1.0：
-webkit-min-device-pixel-ratio為1.3：
-webkit-min-device-pixel-ratio為1.5：
-webkit-min-device-pixel-ratio為2.0：
前端響應式布局
這段時間一直在學習前端的東西記錄一下自己所欠缺的東西！響應式布局 由於以前基本上沒有接觸前端的東西，熟悉又陌生，熟悉是因為經常聽見同事在說，陌生是因為自己沒有實踐過 查詢 查詢 剛開始我看名字以為是查詢之類的 說明 通過不同的 型別和條件定義樣式表規則。ok 我已經了基本上了解響應式布局是幹嘛的了 ...
前端之響應式布局
就是乙個 能夠相容多個終端 而不是為每個終端做乙個特定的版本，可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗。在標頭檔案中新增乙個meta標籤 其中，width device width 這一句的意思是讓頁面的寬度等於螢幕的寬度。rem 指的是 html 元素的 font size，ht...
web前端 響應式布局
隨著移動裝置的流行，網頁設計必須要考慮到移動端的設計。同乙個 為了相容pc端和移動端顯示，就需要進行響應式開發。利用 查詢，讓同乙個 相容不同的終端 pc端 移動端 呈現不同的頁面布局。css3 media查詢 用於查詢裝置是否符合某一特定條件，這些特定條件包括螢幕尺寸 是否可觸控 螢幕精度 橫屏豎...