<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 媒体类型</title>
<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 print,screen{
p.test{font-weight: bold}
}
</style>
</head>
<body>
<h2>在屏幕和打印时显示不同的字体</h2>
<p class="test">学的不仅是技术 更是梦想</p>
</body>
</html>
<!--
媒体类型
一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。
其他一些属性可用于不同的媒体类型。例如, font-size 属性可用于屏幕和印刷媒体,但有不同的值。
屏幕和纸上的文件不同,通常需要一个更大的字体,sans-serif 字体比较适合在屏幕上阅读,
而 serif 字体更容易在纸上阅读。
-->
<!--
@media 规则
@media 规则允许在相同样式表为不同媒体设置不同的样式。
在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。
但是如果页面打印,将是 10 个像素的 Times 字体。请注意,font-weight 在屏幕上和纸上设置为粗体:
实例
@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;}
}
尝试一下 »
你可以自己尝试看看 ! 如果您使用的是 Mozilla / Firefox 或 IE5+ 打印此页,
你会看到,媒体类型将使用另一种比其他文本字体大小小点的字体显示
-->
<!--
其他媒体类型
注意:媒体类型名称不区分大小写。
媒体类型 描述
all 用于所有的媒体设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示,比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒体,比如电传打字机和终端。
tv 用于电视机类型的设备。
-->
CSS 媒体类型
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 现在的自媒体环境,已经进入成熟期,或者说是冷静期,和之前的成长期、爆炸期已经不太一样。 如果说在论坛时代、博客时代...
- 如果你是同为自媒体人就可以加我味杏:wkzz515大家一起交流! 现在的自媒体环境,已经进入成熟期,或者说是冷静期...
- FutureTask是一个支持取消的异步处理器,一般在线程池中用于异步接受callable返回值。主要实现分三部分...