CSS 媒体类型(Media Type)

CSS 媒体类型

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

媒体类型

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

@media规则

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

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

<style>
@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {
    	color:pink;
    	font-family:times,serif;font-size:10px;
    }
}
@media screen,print
{
    p.test {font-weight:bold;}
}
</style>

效果图：

不同的媒介类型

注意：媒介类型名称对大小写不敏感。