CSS 媒体类型

CSS 媒体类型指定文件将如何在不同媒体呈现,该文件可以以不同的方式显示在屏幕上,在纸张上,或听觉浏览器等等

CSS 媒体类型

一些 CSS 属性只能用在某些媒体上

例如 "voice-family" 属性是专为听觉用户代理

其它一些属性可用于不同的媒体类型

例如,"font-size" 属性可用于屏幕和印刷媒体,但有不同的值

屏幕和纸上的文件不同,通常需要一个更大的字体,sans - serif 字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读

@media 规则

@media 规则允许在相同样式表为不同媒体设置不同的样式

下面的范例告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式

但是如果页面打印,将是 10 个像素的 Times 字体

注意, CSS 属性 font-weigh t在屏幕上和纸上设置为粗体

<!DOCTYPE html>
<meta charset="utf-8" />
<style>
@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}
</style>
<body>
....
</body>

你可以自己尝试看看

如果使用的是 Mozilla / Firefox 或 IE5+ 打印此页,可以会看到 "Media Types" 将使用另一种比其他文本字体大小小点的字体显示

CSS 支持的媒体类型

媒体类型名称不区分大小写,但我们推荐使用小写

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

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.