CSS 媒体类型

<!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  用于电视机类型的设备。



-->
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容