CSS3 @media规则

例

改变背景颜色，如果视口480像素或更宽：

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

试一试»

更多"Try it Yourself"下面的例子。

定义和用法

@media规则是用来定义为不同的媒体类型/设备不同的样式规则。

在CSS2这被称为媒体类型，而在CSS3它被称为媒体查询。

媒体查询看装置的能力，并且可以用来检查许多事情，比如：

宽度与视口高度
宽度和装置的高度
方向(is the tablet/phone in landscape or portrait mode?)
解析度
以及更多

浏览器支持

在表中的数字规定，完全支持@media规则的第一个浏览器版本。

属性
@media	21	9	3.5	4	9

CSS语法

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

您也可以有不同的媒体不同的样式表 ：

媒体类型

值	描述
all	用于所有媒体类型的设备
aural	已过时。用于语音和声音合成器
braille	已过时。用于盲文触觉反馈设备
embossed	已过时。用于分页盲文打印机
handheld	已过时。用于小型或手持设备
print	用于打印机
projection	已过时。用于投影演示，像幻灯片
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	使用屏幕阅读器的"reads"的页面出声
tty	已过时。用于使用固定间距字符网格媒体，如电传打字机和终端
tv	已过时。用于电视型器件

媒体功能

值	描述
aspect-ratio	的宽度和视口的高度之间的比率
color	每个颜色分量的比特为输出设备的数量
color-index	该装置可以显示的颜色数
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	每比特的最大数量"color"单色上(greyscale)设备
max-resolution	该装置的最大分辨率，使用dpi或DPCM
max-width	显示区域的最大宽度，例如浏览器窗口
min-aspect-ratio	宽度和显示区域的高度之间的最小比率
min-color	每个颜色分量的比特为输出设备的最小数目
min-color-index	颜色的最小数目的设备可以显示
min-device-aspect-ratio	宽度和器件的高度之间的最小比率
min-device-width	该装置的最小宽度，如在计算机屏幕
min-device-height	该装置的最小高度，如在计算机屏幕
min-height	显示区的最小高度，例如浏览器窗口
min-monochrome	每比特的最小数目"color"单色上(greyscale)设备
min-resolution	该装置的最小分辨率，使用dpi或DPCM
min-width	显示区域的最小宽度，如浏览器窗口
monochrome	每比特的数目"color"单色上(greyscale)设备
orientation	视口的方向(landscape or portrait mode)
overflow-block	这是如何沿着溢出块轴视输出设备句柄的内容(added in Media Queries Level 4)
overflow-inline	可以在溢出沿字形轴视内容进行滚动(added in Media Queries Level 4)
resolution	输出设备的分辨率，使用DPI或DPCM
scan	输出设备的扫描过程
update-frequency	如何能迅速输出设备修改内容的外观(added in Media Queries Level 4)
width	视口宽度

CSS 参考

CSS 属性