CSS3@media查詢

實(shí)例

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

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

定義和使用

使用 @media 查詢，你可以針對(duì)不同的媒體類(lèi)型定義不同的樣式。

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

當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。

瀏覽器支持

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

Rule     
@media2193.54.09

CSS 語(yǔ)法

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

你也可以針對(duì)不同的媒體使用不同stylesheets:

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

媒體類(lèi)型

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

媒體功能

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

實(shí)例

更多實(shí)例

實(shí)例

使用 @media 查詢來(lái)制作響應(yīng)式設(shè)計(jì)：

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

    .gridmain{
       width:100%;
    }

    .gridright{
       width:100%;
    }
}


相關(guān)頁(yè)面

CSS 教程: CSS 媒體類(lèi)型