CSS3 @media 查詢
實例
如果文檔寬度小于 300 像素則修改背景演示(background-color):
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
body {
background-color:lightblue;
}
}
嘗試一下 ?
定義和使用
使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。
@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。
當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。
瀏覽器支持
表格中的數字表示支持 @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 | 用于所有設備 |
| aural | 已廢棄。用于語音和聲音合成器 |
| braille | 已廢棄。 應用于盲文觸摸式反饋設備 |
| embossed | 已廢棄。 用于打印的盲人印刷設備 |
| handheld | 已廢棄。 用于掌上設備或更小的裝置，如PDA和小型電話 |
| 用于打印機和打印預覽 | |
| projection | 已廢棄。 用于投影設備 |
| screen | 用于電腦屏幕，平板電腦，智能手機等。 |
| speech | 應用于屏幕閱讀器等發(fā)聲設備 |
| tty | 已廢棄。 用于固定的字符網格，如電報、終端設備和對字符有限制的便攜設備 |
| tv | 已廢棄。 用于電視和網絡電視 |
媒體功能
| 值 | 描述 |
|---|---|
| aspect-ratio | 定義輸出設備中的頁面可見區(qū)域寬度與高度的比率 |
| color | 定義輸出設備每一組彩色原件的個數。如果不是彩色設備，則值等于0 |
| color-index | 定義在輸出設備的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等于0 |
| device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的比率。 |
| device-height | 定義輸出設備的屏幕可見高度。 |
| device-width | 定義輸出設備的屏幕可見寬度。 |
| grid | 用來查詢輸出設備是否使用柵格或點陣。 |
| height | 定義輸出設備中的頁面可見區(qū)域高度。 |
| max-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-color | 定義輸出設備每一組彩色原件的最大個數。 |
| max-color-index | 定義在輸出設備的彩色查詢表中的最大條目數。 |
| max-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最大比率。 |
| max-device-height | 定義輸出設備的屏幕可見的最大高度。 |
| max-device-width | 定義輸出設備的屏幕最大可見寬度。 |
| max-height | 定義輸出設備中的頁面最大可見區(qū)域高度。 |
| max-monochrome | 定義在一個單色框架緩沖區(qū)中每像素包含的最大單色原件個數。 |
| max-resolution | 定義設備的最大分辨率。 |
| max-width | 定義輸出設備中的頁面最大可見區(qū)域寬度。 |
| min-aspect-ratio | 定義輸出設備中的頁面可見區(qū)域寬度與高度的最小比率。 |
| min-color | 定義輸出設備每一組彩色原件的最小個數。 |
| min-color-index | 定義在輸出設備的彩色查詢表中的最小條目數。 |
| min-device-aspect-ratio | 定義輸出設備的屏幕可見寬度與高度的最小比率。 |
| min-device-width | 定義輸出設備的屏幕最小可見寬度。 |
| min-device-height | 定義輸出設備的屏幕的最小可見高度。 |
| min-height | 定義輸出設備中的頁面最小可見區(qū)域高度。 |
| min-monochrome | 定義在一個單色框架緩沖區(qū)中每像素包含的最小單色原件個數 |
| min-resolution | 定義設備的最小分辨率。 |
| min-width | 定義輸出設備中的頁面最小可見區(qū)域寬度。 |
| monochrome | 定義在一個單色框架緩沖區(qū)中每像素包含的單色原件個數。如果不是單色設備，則值等于0 |
| orientation | 定義輸出設備中的頁面可見區(qū)域高度是否大于或等于寬度。 |
| resolution | 定義設備的分辨率。如：96dpi, 300dpi, 118dpcm |
| scan | 定義電視類設備的掃描工序。 |
| width | 定義輸出設備中的頁面可見區(qū)域寬度。 |
更多實例
實例
使用 @media 查詢來制作響應式設計：
@media only screen and (max-width: 500px) {
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}
.gridmenu {
width:100%;
}
.gridmain {
width:100%;
}
.gridright {
width:100%;
}
}
嘗試一下 ?
相關頁面
CSS 教程: CSS 媒體類型
更多建議：