CSS 媒体类型

媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

CSS - 媒体类型

一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。 其他一些属性可用于不同的媒体类型。例如, font-size 属性可用于屏幕和印刷媒体,但有不同的值。 屏幕和纸上的文件不同,通常需要一个更大的字体,sans-serif 字体比较适合在屏幕上阅读, 而 serif 字体更容易在纸上阅读。

CSS - @media 规则

@media 规则使你有能力在相同的样式表中,使用不同的样式规则来针对不同的媒介。

下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。 但是假如页面需要被打印,将使用 10 个像素的 Times 字体。 注意:font-weight 被设置为粗体,不论显示器还是纸媒介:

@media screen
{
    p.section {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.section {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.section {font-weight:bold;}
}

CSS - 其他媒体类型

注意:媒体类型名称不区分大小写。

媒体类型 描述
all用于所有的媒体设备
aural用于语音和音频合成器
braille用于盲人用点字法触觉回馈设备
embossed用于分页的盲人用点字法打印机
handheld用于小的手持的设备
print用于打印机
projection用于方案展示,比如幻灯片
screen用于电脑显示器
tty用于使用固定密度字母栅格的媒体,比如电传打字机和终端
tv用于电视机类型的设备