如果文檔寬度小于 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
@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
應用于螢幕閱讀器等發聲裝置
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
.gridright {
width:100%;
CSS 多媒體查詢，适配各種裝置尺寸
CSS 教程: CSS 媒體類型