CSS3 多媒體查詢

CSS2 多媒體型別

@media 規則在 CSS2 中有介紹，針對不同媒體型別可以定製不同的樣式規則。

例如：你可以針對不同的媒體型別(包括顯示器、便攜裝置、電視機，等等)設定不同的樣式規則。

但是這些多媒體型別在很多裝置上支援還不夠友好。

CSS3 多媒體查詢

CSS3 的多媒體查詢繼承了 CSS2 多媒體型別的所有思想： 取代了查詢裝置的型別，CSS3 根據設定自適應顯示。

媒體查詢可用於檢測很多事情，例如：

  • viewport(視窗) 的寬度與高度
  • 裝置的寬度與高度
  • 朝向 (智慧手機橫屏，豎屏) 。
  • 解析度

目前很多針對蘋果手機，Android 手機，平板等裝置都會使用到多媒體查詢。

瀏覽器支援

表格中的數字表示支援該屬性的第一個瀏覽器的版本號。

屬性
@media 21.0 9.0 3.5 4.0 9.0

多媒體查詢語法

多媒體查詢由多種媒體組成，可以包含一個或多個表示式，表示式根據條件是否成立返回 true 或 false。

@media not|only mediatype and (expressions) { CSS 程式碼...; }

如果指定的多媒體型別匹配裝置型別則查詢結果返回 true，文件會在匹配的裝置上顯示指定樣式效果。

除非你使用了 not 或 only 操作符，否則所有的樣式會適應在所有裝置上顯示效果。

  • not: not是用來排除掉某些特定的裝置的，比如 @media not print（非列印裝置）。

  • only: 用來定某種特別的媒體型別。對於支援Media Queries的移動裝置來說，如果存在only關鍵字，移動裝置的Web瀏覽器會忽略only關鍵字並直接根據後面的表示式應用樣式檔案。對於不支援Media Queries的裝置但能夠讀取Media Type型別的Web瀏覽器，遇到only關鍵字時會忽略這個樣式檔案。

  • all: 所有裝置，這個應該經常看到。

你也可以在不同的媒體上使用不同的樣式檔案：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 多媒體型別

值 描述
all 用於所有多媒體型別裝置
print 用於印表機
screen 用於電腦螢幕，平板，智慧手機等。
speech 用於螢幕閱讀器

多媒體查詢簡單例項

使用多媒體查詢可以在指定的裝置上使用對應的樣式替代原有的樣式。

以下例項中在螢幕可視視窗尺寸小於 480 畫素的裝置上修改背景顏色:

例項

@media screen and (max-width: 480px) { body { background-color: lightgreen; } }

嘗試一下 ?

以下例項在螢幕可視視窗尺寸大於 480 畫素時將選單浮動到頁面左側：

例項

@media screen and (min-width: 480px) { #leftsidebar {width: 200px; float: left;} #main {margin-left:216px;} }

嘗試一下 ?

以下例項在螢幕可視視窗尺寸小於 600 畫素時將 div 元素隱藏：

例項

@media screen and (max-width: 600px) { div.example { display: none; } }

嘗試一下 ?

CSS3 @media 參考

更多多媒體查詢內容可以參考 @media 規則。