media queries是css3新增加的乙個模組功能，其最大的特色就是通過css3來查詢**，然後呼叫對應的樣式。
在徹底地了解media queries之前，我們需要了解其中的兩個重要部分，第乙個是**型別，第二個是**特性。
**型別（media type）在css2中是乙個常見的屬性，可以通過**型別對不同的裝置指定不同的樣式。
在實際中**型別有近十種之多，實際之中常用的也就那麼幾種，不過**型別的引用方法也有多種，常見的有：
link標籤、@import和css3新增的@media：
link引入**型別其實就是在標籤引用樣式的時候，通過link標籤中的media屬性來指定不同的**型別。如下所示：
@import可以引用樣式檔案，同樣也可以用來引用**型別。@import引入**型別主要有兩種方式，
1,一種是在樣式中通過@import呼叫另乙個樣式檔案;
@import url(reset.css) screen;在@media是css3中新引進的乙個特性，被稱為**查詢。在頁面中也可以通過這個屬性來引入**型別。@media引入**型別和@import有點類似也具有兩方式。
（1）在樣式檔案中引用**型別：
@media screen
}
@media **型別 and (**特性)
注意：使用media queries必須要使用"@media"開頭，然後指定**型別（也可以稱為裝置型別），隨後是指定**特性（也可以稱之為裝置特性）。**特性的書寫方式和樣式的書寫方式非常相似，主要分為兩個部分，第一部分指的是**特性，第二部分分為**特性所指定的值，而且這兩個部分之間使用冒號分隔。例如：
(max-width:480px)
"max-width"是**特性中最常用的乙個特性，其意思是指**型別小於或等於指定的寬度時，樣式生效。如：
@media screen and (max-width:480px)
}
"min-width"與"max-width"相反，指的是**型別大於或等於指定寬度時，樣式生效
@media screen and (min-width:900px)@media screen and (min-width:600px) and (max-width：900px)
}
width,height——渲染視窗寬高（可視區域）
orientation——裝置方向
resolution——裝置解析度
在智慧型裝置上，例如iphone,ipad等，還可以根據螢幕裝置的尺寸來設定相應的樣式（或者呼叫相應的樣式檔案）。同樣的，對於螢幕裝置同樣可以使用"min/max"對於引數，如"min-device-width"或者"max-device-width"。
上面的**指的是"iphone.css"樣式適用於最大裝置寬度為480px，比如說iphone上的顯示，這裡的"max-device-width"所指的是裝置的實際解析度，也就是可視面積解析度。
@media not print and (max-width:1200px)
上面**表示的是：樣式**將使用在除列印裝置和裝置寬度小於1200px下所有裝置中。
only用來指定某種特定的**型別，可以用來排除不支援**查詢的瀏覽器。其實only很多時候是用來對那些不支援media query但卻支援media type的裝置隱藏樣式表的。其主要有：支援media type的裝置，正常呼叫樣式，此時就當only不存在;表示不支援**特性(例如max-width)但又支援media type的裝置，這樣就會不讀樣式，因為其先會讀取only而不是screen；另外不支援media queries的瀏覽器，不論是否支援only,樣式都不會被採用。
在media query中如果沒有明確指定media type，那麼其預設為all，如：
另外在樣式中，還可以使用多條語句來將同乙個樣式應用於不同的**型別和**特性中，指定方式如下所示。
上面**中style.css樣式被用在寬度小於或等於480px的手持裝置上，或者被用於螢幕寬度大於或等於960px的裝置上。
到目前為止，css3 media queries得到了眾多瀏覽器支援，除了ie6-8瀏覽器不支援之外，
還有乙個與眾不同的時，media queries在其他瀏覽器中不要像其他css3屬性一樣在不同的瀏覽器中新增字首。
css3自適應布局單位vw,vh
視口單位 viewport units 什麼是視口？在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域 而在移動端，它涉及3個視口 layout viewport 布局視口 visual viewport 視覺視口 ideal viewport 理想視口 視口單位中的 視口 桌面端指的是瀏覽器的可...
css3自適應布局單位vw,vh
在pc端，視口指的是在pc端，指的是瀏覽器的可視區域 而在移動端，它涉及3個視口 layout viewport 布局視口 visual viewport 視覺視口 ideal viewport 理想視口 視口單位中的 視口 pc端指的是瀏覽器的可視區域 移動端指的就是viewport中的layou...
基於CSS3的自適應布局技術
前端html 結構 css 表現 這部分，無非是兩大問題，裝飾與布局。裝飾某個widget就算再難，我們也可以用搞定。布局就不是這回事了，別的不說，display inline block有3px bug，定位布局與浮動布局相關的bug也不在10以下，關鍵是用起來非常麻煩，需要許多額外的元素 早些年...