CSS媒體查詢

CSS2引入媒體類型

該@media規則，在CSS2推出，使得它可以定義不同的媒體類型的不同樣式規則。

例子：你可以有一組樣式規則為計算機屏幕，一個用於打印機，一個用於手持設備，一個用於電視型裝置，並依此類推。

不幸的是，這些媒體類型從未設備，使其比打印介質類型等得到了很多的支持。

CSS3推出媒體查詢

在CSS3媒體查詢擴展CSS2媒體類型的想法：與其找一個類型的設備，他們看的設備的能力。

媒體查詢可以用於檢查很多東西，比如：

• 寬度與視口高度
• 寬度和裝置的高度
• 方向（是平板電腦/手機橫向或縱向模式？）
• 解析度

使用媒體查詢是一個定制的樣式表傳遞到平板電腦，iPhone，和Android的流行技術。

瀏覽器支持

在表中的數字規定，完全支持@media規則的第一個瀏覽器版本。

媒體查詢語法

媒體查詢由媒體類型，並且可以包含一個或多個表達式，它解析為true或false。

如果指定的媒體類型匹配時，正被顯示在文件的設備的類型，並在媒體查詢所有表達式為真查詢的結果為真。 當媒體查詢為真，相應的樣式表或樣式規則應用，按照正常的級聯規則。

除非你使用沒有或者只有運營商，媒體類型是可選的， all類型將被暗示。

您也可以有不同的媒體不同的樣式表：

CSS3媒體類型

媒體查詢簡單的例子

使用媒體查詢的一種方法是有一個替代的CSS部分正確的樣式表內。

下面的例子改變background-color ，以淺綠，如果視口是480像素或更寬（如果視口小於480像素， background-color將是粉紅色）：

下面的例子說明會浮到頁面左邊的菜單，如果視口480像素或更寬（如果視口小於480像素，菜單將在內容的頂部）：

CSS3 @media參考

對於所有的媒體類型和功能/表達式完整的概述，請看@media在我們的參考CSS規則。