CSS 媒体类型

CSS 媒体类型允许你格式化文档，以便在各种类型的媒体上正确显示，例如屏幕、打印、听觉浏览器等。

媒体类型简介

样式表最重要的功能之一是，你可以为不同的媒体类型指定单独的样式表。这是构建打印机友好网页的最佳方法之一 - 只需为“打印”媒体类型指定不同的样式表。

某些 CSS 属性仅适用于某些媒体。例如， page-break-after 属性仅适用于分页媒体。但是，有几个属性可能由不同的媒体类型共享，但可能需要该属性的不同值。例如，font-size 属性可用于屏幕和打印介质，但可能具有不同的值。

与纸张相比，文档在计算机屏幕上通常需要更大的字体以获得更好的可读性，而且无衬线字体被认为更容易在屏幕上阅读，而衬线字体在打印时很受欢迎。因此，有必要指定样式表或一组样式规则适用于某些媒体类型。

创建与媒体相关的样式表

通常使用三种方法来指定样式表的媒体依赖关系：

方法 1：使用 @media At 规则

@media 规则用于在单个样式表中为不同的媒体类型定义不同的样式规则。它后面跟着一个以逗号分隔的媒体类型列表和包含目标媒体样式规则的 CSS 声明块。

下面示例中的样式声明告诉浏览器在屏幕上以 14 像素 Arial 字体显示正文内容，但是在打印时它将采用 12 号 Times 字体。但是，对于这两者， line-height 属性值设置为 1.2：

@media screen{
    body {
        color: #32cd32;
        font-family: Arial, sans-serif;
        font-size: 14px;
    }
}
@media print {
    body {
        color: #ff6347;
        font-family: Times, serif;
        font-size: 12pt;
    }
}
@media screen, print {
    body {
        line-height: 1.2;
    }
}

注意： @media 规则之外的样式规则适用于样式表适用的所有媒体类型。CSS2.1 中，@media 内的 At 规则无效。

方法 2：使用 @import At 规则

@import 规则是为特定目标媒体设置样式信息的另一种方法 - 只需在导入的样式表的 URL 之后指定以逗号分隔的媒体类型。

@import url("css/screen.css") screen;
@import url("css/print.css") print;
body {
    background: #f5f5f5;
    line-height: 1.2;
}

@import 语句中的 print 媒体类型指示浏览器加载外部样式表（print.css）并仅将其样式用于打印介质。

注意： 所有 @import 语句必须出现在样式表的开头，在任何声明之前。样式表中指定的任何样式规则都会覆盖导入样式表中的冲突样式规则。

方法 3：使用 <link> 元素

在 <link> 元素上的 media 属性上被用于指定目标介质为 HTML 文档中的外部样式表。

<link rel="stylesheet" type="text/css" media="all" href="css/common.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">

在此示例中， media 属性指示浏览器加载外部样式表 screen.css 并仅将其样式用于屏幕，而 print.css 用于打印目的。

提示： 你还可以指定多种媒体类型（每种类型用逗号分隔 media="screen, print"）以及 <link> 元素的媒体要求。

不同媒体类型

下表列出了可用于定位不同类型设备的各种介质类型，如打印机、手持设备、计算机屏幕等。

警告： 虽然有几个媒体类型可供选择，但大多数的浏览器只支持 all ， screen 以及 print 媒体类型。