CSS3 @media 查詢

實例

如果文檔寬度小于 300 像素則修改背景演示(background-color):

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

嘗試一下 ?

定義和使用

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

@media 可以針對不同的屏幕尺寸設(shè)置不同的樣式,特別是如果你需要設(shè)置設(shè)計響應(yīng)式的頁面,@media 是非常有用的。

當你重置瀏覽器大小的過程中,頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。


瀏覽器支持

表格中的數(shù)字表示支持 @media 規(guī)則的第一個瀏覽器的版本號。

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 用于所有設(shè)備
aural 已廢棄。用于語音和聲音合成器
braille 已廢棄。 應(yīng)用于盲文觸摸式反饋設(shè)備
embossed 已廢棄。 用于打印的盲人印刷設(shè)備
handheld 已廢棄。 用于掌上設(shè)備或更小的裝置,如PDA和小型電話
print 用于打印機和打印預(yù)覽
projection 已廢棄。 用于投影設(shè)備
screen 用于電腦屏幕,平板電腦,智能手機等。
speech 應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備
tty 已廢棄。 用于固定的字符網(wǎng)格,如電報、終端設(shè)備和對字符有限制的便攜設(shè)備
tv 已廢棄。 用于電視和網(wǎng)絡(luò)電視

媒體功能

描述
aspect-ratio 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾扰c高度的比率
color 定義輸出設(shè)備每一組彩色原件的個數(shù)。如果不是彩色設(shè)備,則值等于0
color-index 定義在輸出設(shè)備的彩色查詢表中的條目數(shù)。如果沒有使用彩色查詢表,則值等于0
device-aspect-ratio 定義輸出設(shè)備的屏幕可見寬度與高度的比率。
device-height 定義輸出設(shè)備的屏幕可見高度。
device-width 定義輸出設(shè)備的屏幕可見寬度。
grid 用來查詢輸出設(shè)備是否使用柵格或點陣。
height 定義輸出設(shè)備中的頁面可見區(qū)域高度。
max-aspect-ratio 定義輸出設(shè)備的屏幕可見寬度與高度的最大比率。
max-color 定義輸出設(shè)備每一組彩色原件的最大個數(shù)。
max-color-index 定義在輸出設(shè)備的彩色查詢表中的最大條目數(shù)。
max-device-aspect-ratio 定義輸出設(shè)備的屏幕可見寬度與高度的最大比率。
max-device-height 定義輸出設(shè)備的屏幕可見的最大高度。
max-device-width 定義輸出設(shè)備的屏幕最大可見寬度。
max-height 定義輸出設(shè)備中的頁面最大可見區(qū)域高度。
max-monochrome 定義在一個單色框架緩沖區(qū)中每像素包含的最大單色原件個數(shù)。
max-resolution 定義設(shè)備的最大分辨率。
max-width 定義輸出設(shè)備中的頁面最大可見區(qū)域?qū)挾取?/td>
min-aspect-ratio 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾扰c高度的最小比率。
min-color 定義輸出設(shè)備每一組彩色原件的最小個數(shù)。
min-color-index 定義在輸出設(shè)備的彩色查詢表中的最小條目數(shù)。
min-device-aspect-ratio 定義輸出設(shè)備的屏幕可見寬度與高度的最小比率。
min-device-width 定義輸出設(shè)備的屏幕最小可見寬度。
min-device-height 定義輸出設(shè)備的屏幕的最小可見高度。
min-height 定義輸出設(shè)備中的頁面最小可見區(qū)域高度。
min-monochrome 定義在一個單色框架緩沖區(qū)中每像素包含的最小單色原件個數(shù)
min-resolution 定義設(shè)備的最小分辨率。
min-width 定義輸出設(shè)備中的頁面最小可見區(qū)域?qū)挾取?/td>
monochrome 定義在一個單色框架緩沖區(qū)中每像素包含的單色原件個數(shù)。如果不是單色設(shè)備,則值等于0
orientation 定義輸出設(shè)備中的頁面可見區(qū)域高度是否大于或等于寬度。
resolution 定義設(shè)備的分辨率。如:96dpi, 300dpi, 118dpcm
scan 定義電視類設(shè)備的掃描工序。
width 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾取?/td>


實例

更多實例

實例

使用 @media 查詢來制作響應(yīng)式設(shè)計:

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

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}

嘗試一下 ?

相關(guān)頁面

CSS 教程: CSS 媒體類型