CSS3 @media規則

例

改變背景顏色，如果視口480像素或更寬：

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

試一試»

更多"Try it Yourself"下面的例子。

定義和用法

@media規則是用來定義為不同的媒體類型/設備不同的樣式規則。

在CSS2這被稱為媒體類型，而在CSS3它被稱為媒體查詢。

媒體查詢看裝置的能力，並且可以用來檢查許多事情，比如：

寬度與視口高度
寬度和裝置的高度
方向(is the tablet/phone in landscape or portrait mode?)
解析度
以及更多

瀏覽器支持

在表中的數字規定，完全支持@media規則的第一個瀏覽器版本。

屬性
@media	21	9	3.5	4	9

CSS語法

@media not|onlymediatype and (media feature){
CSS-Code;
}

您也可以有不同的媒體不同的樣式表 ：

媒體類型

值	描述
all	用於所有媒體類型的設備
aural	已過時。用於語音和聲音合成器
braille	已過時。用於盲文觸覺反饋設備
embossed	已過時。用於分頁盲文打印機
handheld	已過時。用於小型或手持設備
print	用於打印機
projection	已過時。用於投影演示，像幻燈片
screen	用於電腦屏幕，平板電腦，智能手機等。
speech	使用屏幕閱讀器的"reads"的頁面出聲
tty	已過時。用於使用固定間距字符網格媒體，如電傳打字機和終端
tv	已過時。用於電視型器件

媒體功能

值	描述
aspect-ratio	的寬度和視口的高度之間的比率
color	每個顏色分量的比特為輸出設備的數量
color-index	該裝置可以顯示的顏色數
device-aspect-ratio	寬度和器件的高度之間的比率
device-height	該裝置的高度，如在計算機屏幕
device-width	該裝置的寬度，如在計算機屏幕
grid	設備是否是一個格柵或位圖
height	視口的高度
max-aspect-ratio	寬度和顯示區域的高度之間的最大比
max-color	每個顏色分量的比特為輸出設備的最大數量
max-color-index	該裝置可以顯示的顏色的最大數量
max-device-aspect-ratio	寬度和器件的高度之間的最大比
max-device-height	該裝置的最大高度，例如計算機屏幕
max-device-width	該裝置的最大寬度，例如計算機屏幕
max-height	顯示區域的最大高度，例如瀏覽器窗口
max-monochrome	每比特的最大數量"color"單色上(greyscale)設備
max-resolution	該裝置的最大分辨率，使用dpi或DPCM
max-width	顯示區域的最大寬度，例如瀏覽器窗口
min-aspect-ratio	寬度和顯示區域的高度之間的最小比率
min-color	每個顏色分量的比特為輸出設備的最小數目
min-color-index	顏色的最小數目的設備可以顯示
min-device-aspect-ratio	寬度和器件的高度之間的最小比率
min-device-width	該裝置的最小寬度，如在計算機屏幕
min-device-height	該裝置的最小高度，如在計算機屏幕
min-height	顯示區的最小高度，例如瀏覽器窗口
min-monochrome	每比特的最小數目"color"單色上(greyscale)設備
min-resolution	該裝置的最小分辨率，使用dpi或DPCM
min-width	顯示區域的最小寬度，如瀏覽器窗口
monochrome	每比特的數目"color"單色上(greyscale)設備
orientation	視口的方向(landscape or portrait mode)
overflow-block	這是如何沿著溢出塊軸視輸出設備句柄的內容(added in Media Queries Level 4)
overflow-inline	可以在溢出沿字形軸視內容進行滾動(added in Media Queries Level 4)
resolution	輸出設備的分辨率，使用DPI或DPCM
scan	輸出設備的掃描過程
update-frequency	如何能迅速輸出設備修改內容的外觀(added in Media Queries Level 4)
width	視口寬度

CSS 參考

CSS 屬性