CSS3 @media 查詢


實例

如果文檔寬度小於 300 像素則修改背景顏色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

定義和使用

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的螢幕尺寸設置不同的樣式，特別是如果你需要設置設計回應式的頁面，@media 是非常有用的。

當你重置流覽器大小的過程中，頁面也會根據流覽器的寬度和高度重新渲染頁面。

流覽器支持

表格中的數字表示支持 @media 規則的第一個流覽器的版本號。

Rule
@media 21 9 3.5 4.0 9

CSS 語法

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

你也可以針對不同的媒體使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

媒體類型

值 描述
all 用於所有設備
aural 已廢棄。用於語音和聲音合成器
braille 已廢棄。 應用於盲文觸摸式回饋設備
embossed 已廢棄。 用於列印的盲人印刷設備
handheld 已廢棄。 用於掌上設備或更小的裝置，如PDA和小型電話
print 用於印表機和列印預覽
projection 已廢棄。 用於投影設備
screen 用於電腦螢幕，平板電腦，智能手機等。
speech 應用於螢幕閱讀器等發聲設備
tty 已廢棄。 用於固定的字元網格，如電報、終端設備和對字元有限制的便攜設備
tv 已廢棄。 用於電視和網路電視

媒體功能

值 描述
aspect-ratio 定義輸出設備中的頁面可見區域寬度與高度的比率
color 定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等於0
color-index 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0
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 定義在一個單色框架緩衝區中每像素包含的最大單色原件個數。
max-resolution 定義設備的最大解析度。
max-width 定義輸出設備中的頁面最大可見區域寬度。
min-aspect-ratio 定義輸出設備中的頁面可見區域寬度與高度的最小比率。
min-color 定義輸出設備每一組彩色原件的最小個數。
min-color-index 定義在輸出設備的彩色查詢表中的最小條目數。
min-device-aspect-ratio 定義輸出設備的螢幕可見寬度與高度的最小比率。
min-device-width 定義輸出設備的螢幕最小可見寬度。
min-device-height 定義輸出設備的螢幕的最小可見高度。
min-height 定義輸出設備中的頁面最小可見區域高度。
min-monochrome 定義在一個單色框架緩衝區中每像素包含的最小單色原件個數
min-resolution 定義設備的最小解析度。
min-width 定義輸出設備中的頁面最小可見區域寬度。
monochrome 定義在一個單色框架緩衝區中每像素包含的單色原件個數。如果不是單色設備，則值等於0
orientation 定義輸出設備中的頁面可見區域高度是否大於或等於寬度。
resolution 定義設備的解析度。如：96dpi, 300dpi, 118dpcm
scan 定義電視類設備的掃描工序。
width 定義輸出設備中的頁面可見區域寬度。

實例

更多實例

實例

使用 @media 查詢來製作回應式設計：

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}


更多實例

CSS 多媒體查詢，適配各種設備尺寸

相關頁面

CSS 教學: CSS 媒體類型