層疊樣式表/媒體型別

可以使單個 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>

在瀏覽器中載入頁面後，調整視窗大小以檢視滿足條件時背景顏色是否會改變。