CSS 媒体类型

CSS 媒体类型允许您格式化文档以在各种类型的媒体（例如屏幕、打印、听觉浏览器等）上正确呈现。

媒体类型简介

样式表最重要的特性之一是，您可以为不同的媒体类型指定单独的样式表。 这是构建打印机友好型网页的最佳方法之一 — 只需为"print"媒体类型分配不同的样式表。

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

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

创建媒体相关样式表

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

方法 1：使用 @media 规则

@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;
    }
}

方法 2：使用 @import 规则

@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) 并将其样式仅用于打印媒体。

方法 3：使用 <link> 元素

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

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

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

不同的媒体类型

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

媒体类型