CSS @media 規則
示例
當瀏覽器視窗寬度小於或等於 600px 時，將 <body> 元素的背景顏色更改為 "lightblue"
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
@media 規則用於媒體查詢，以便為不同的媒體型別/裝置應用不同的樣式。
媒體查詢可以檢查許多內容，例如：
- 視口的寬度和高度
- 裝置的寬度和高度
- 方向（平板/手機是橫向還是縱向模式？）
- resolution
使用媒體查詢是提供定製樣式表（響應式 Web 設計）到桌面、筆記型電腦、平板電腦和手機的流行技術。
您還可以使用媒體查詢來指定某些樣式僅用於列印文件或螢幕閱讀器（mediatype: print, screen, or speech）。
除了媒體型別，還有媒體特性。媒體特性透過允許測試使用者代理或顯示裝置的特定功能，為媒體查詢提供更詳細的資訊。例如，您可以僅將樣式應用於大於或小於特定寬度的螢幕。
瀏覽器支援
表格中的數字表示完全支援 @media 規則的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS 語法
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-程式碼;
}
not、only 和 and 關鍵字的含義
not: not 關鍵字反轉整個媒體查詢的含義。
only: only 關鍵字阻止不支援帶有媒體特性的媒體查詢的舊瀏覽器應用指定樣式。它對現代瀏覽器沒有影響。
and: and 關鍵字將媒體特性與媒體型別或其他媒體特性結合起來。
它們都是可選的。但是，如果您使用 not 或 only，則必須同時指定媒體型別。
您還可以為不同的媒體設定不同的樣式表，如下所示：
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....
更多示例
示例
當瀏覽器寬度小於或等於 600px 時隱藏一個元素
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
自己動手試一試 »
示例
使用 mediaqueries 將背景顏色設定為 lavender，如果視口寬度為 800 畫素或更寬；設定為 lightgreen，如果視口寬度在 400 到 799 畫素之間。如果視口小於 400 畫素，背景顏色為 lightblue
body {
background-color: lightblue;
}
@media screen and (min-width: 400px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 800px) {
body {
background-color: lavender;
}
}
自己動手試一試 »
示例
建立響應式導航選單（在大螢幕上水平顯示，在小螢幕上垂直顯示）
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
自己動手試一試 »
示例
使用媒體查詢建立響應式列布局
/* 在寬度為 992px 或更小的螢幕上，從四列變為兩列 */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* 在寬度為 600px 或更小的螢幕上，使列堆疊而不是並排顯示 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
自己動手試一試 »
示例
媒體查詢還可以根據瀏覽器方向更改頁面佈局。您可以設定一組 CSS 屬性，這些屬性僅在瀏覽器視窗的寬度大於其高度時生效，這是一種所謂的“橫向”模式。
如果方向為橫向模式，則使用淺藍色背景顏色
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
自己動手試一試 »
示例
使用 mediaqueries 將文字顏色設定為綠色，當文件在螢幕上顯示時，當列印時設定為黑色
@media screen {
body {
color: green;
}
}
@media print {
body {
color: black;
}
}
自己動手試一試 »
示例
逗號分隔列表：使用逗號將另一個媒體查詢新增到已有的媒體查詢中（這將表現得像 OR 運算子）
/* 當寬度在 600px 和 900px 之間 或 大於 1100px 時 - 更改 <div> 的外觀 */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 媒體查詢
CSS 教程：CSS 媒體查詢示例
RWD 教程：使用媒體查詢實現響應式 Web 設計
JavaScript 教程：window.matchMedia() 方法
