層疊樣式表/媒體型別

可以將單個 CSS 規則和整個樣式表設定為僅對某些媒體型別（如螢幕、投影、列印或手持裝置）有效。

媒體型別的規範

• 在 LINK 標籤中
  • <LINK rel="stylesheet" type="text/css" media="screen, projection" href="stylesheet.css">
• 在樣式表中
  • @media screen {
    body { font-family: Verdana; width: 800px; }
    }
• 在 style 屬性中

媒體型別

可以限制 CSS 應用的媒體型別

• all
• aural - 通常用於聽障人士的規則。在 CSS3 中，它正在被 speech 媒體型別取代。
• braille
• embossed
• handheld
• print
• projection
• screen
• speech
• tty
• tv

媒體查詢

媒體查詢是 CSS3 中的一種新的規則格式，它將允許根據使用者代理的屬性（如移動裝置的螢幕解析度）來執行行為。此功能在 WebKit、Presto 和 Gecko 的最新版本中僅部分實現。

要嘗試此功能，請將以下程式碼複製到您的程式碼段編輯器或新的 HTML 檔案中

@media all {
	div.mediaqueryexample {
		height: 10em;
		width: 10em;
		background-color: red;
	}
}

@media all and (min-width: 640px) {
	div#mediaqueryexample1 {
		background-color: green;
	}
}

然後將此程式碼放到 body 中

<div class="mediaqueryexample" id="mediaqueryexample1">min-width: 640px</div>

在瀏覽器中載入頁面後，調整視窗大小，您將在滿足條件時看到背景顏色發生變化。