CSS 媒體查詢
CSS 媒體查詢
@media 規則，在 CSS2 中引入，使得可以為不同的媒體型別定義不同的樣式規則。
CSS3 中的媒體查詢擴充套件了 CSS2 的媒體型別概念：它不是查詢裝置型別，而是查詢裝置的功能。
媒體查詢可以用來檢查許多內容，例如
- 視口的寬度和高度
- 視口的朝向（橫向或縱向）
- resolution
使用媒體查詢是為桌面、筆記本、平板電腦和手機（如 iPhone 和 Android 手機）提供定製化樣式表的流行技術。
CSS 媒體型別
| 值 | 描述 |
|---|---|
| all | 用於所有媒體型別的裝置 |
| 列印 | 用於列印預覽模式 |
| screen | 用於電腦螢幕、平板電腦、智慧手機等。 |
CSS 常用媒體特性
以下是一些常用的媒體特性
| 值 | 描述 |
|---|---|
| orientation | 視口的朝向。橫向或縱向 |
| max-height | 視口的最大高度 |
| min-height | 視口的最小高度 |
| height | 視口的高度（包括捲軸） |
| max-width | 視口的寬度 |
| min-width | 視口的最小寬度 |
| width | 視口的寬度（包括捲軸） |
媒體查詢語法
媒體查詢由媒體型別和零個或多個媒體特性組成，媒體特性解析為 true 或 false。
@media not|only mediatype and (media feature) and (media feature) {
CSS-Code;
}
mediatype 是可選的（如果省略，則預設為 all）。但是，如果你使用 not 或 only，你也必須指定一個 mediatype。
如果指定的媒體型別與文件顯示所在的裝置型別匹配，並且媒體查詢中的所有媒體特性都為 true，則查詢結果為 true。當媒體查詢為 true 時，將應用相應的樣式表或樣式規則，遵循正常的層疊規則。
not、only 和 and 關鍵字的含義
not: 此關鍵字反轉整個媒體查詢的含義。
only: 此關鍵字可防止不支援媒體查詢的舊瀏覽器應用指定的樣式。它對現代瀏覽器沒有影響。
and: 此關鍵字組合了媒體型別和一個或多個媒體特性。
你還可以為不同的媒體和不同寬度的瀏覽器視窗（視口）連結不同的樣式表
<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="example2.css">
等等...
媒體查詢簡單示例
使用媒體查詢的一種方法是直接在樣式表中包含一個備用的 CSS 部分。
以下示例會在視口寬度為 480 畫素或更寬時將背景顏色更改為淺綠色（如果視口小於 480 畫素，背景顏色將為粉色）
以下示例顯示了一個選單，當視口寬度為 480 畫素或更寬時，該選單將浮動到頁面左側（如果視口小於 480 畫素，選單將位於內容上方）
示例
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
自己動手試一試 »
更多媒體查詢示例
有關更多媒體查詢示例，請前往下一頁：CSS MQ 示例。
CSS @media 參考
有關所有媒體型別和功能/表示式的完整概述，請參閱我們 CSS 參考中的 @media 規則。
