響應式開發學習筆記

@media **型別 and （**特性）

「max-width」是**特性中最常用的乙個特性，其意思是指**型別小於或等於指定的寬度時，樣式生效。如：

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

上面表示的是：當螢幕小於或等於480px時,頁面中的廣告區塊（.ads）都將被隱藏。

「min-width」與「max-width」相反，指的是**型別大於或等於指定寬度時，樣式生效。

@media screen and (min-width:900px)

當螢幕在600px~900px之間時，body的背景色渲染為「#f5f5f5」，如下所示。

@media screen and (min-width:600px) and (max-width:900px)
}

在智慧型裝置上，例如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的裝置隱藏樣式表的。其主要有：支援**特性的裝置，正常呼叫樣式，此時就當only不存在；表示不支援**特性但又支援**型別的裝置，這樣就會不讀樣式，因為其先會讀取only而不是screen；另外不支援media queries的瀏覽器，不論是否支援only，樣式都不會被採用。如

在media query中如果沒有明確指定media type，那麼其預設為all，如：

另外在樣式中，還可以使用多條語句來將同乙個樣式應用於不同的**型別和**特性中，指定方式如下所示。

上面**中style.css樣式被用在寬度小於或等於480px的手持裝置上，或者被用於螢幕寬度大於或等於960px的裝置上。

到目前為止，css3 media queries得到了眾多瀏覽器支援，除了ie6-8瀏覽器不支援之外，在所有現代瀏覽器中都可以完美支援。還有乙個與眾不同的是，media queries在其他瀏覽器中不要像其他css3屬性一樣在不同的瀏覽器中新增字首。

關於only解釋

@media only screen...... 她會這樣解析 @media only，解析成功，說明改瀏覽器支援反之：則不支援，下面書寫樣式不應用 @media screen......

不設定相容項

響應式開發學習筆記

響應式開發

響應式開發

media響應式 前端學習筆記

相關推薦

media響應式前端學習筆記