CSS @media(媒体)

CSS媒体类型使您可以格式化文档，使其在各种类型的媒体（例如屏幕，打印，听觉浏览器等）上正确显示。

媒体类型简介

CSS @media(媒体)是样式表最重要的功能之一，您可以为不同的媒体类型指定单独的样式表。这是构建打印机友好的Web页面的最佳方法之一-只需为“打印”媒体类型分配不同的样式表即可。

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

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

创建依赖于媒体的样式表

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

方法1：使用@media规则

该@media规则用于在单个样式表中为不同的媒体类型定义不同的样式规则。通常，其后是用逗号分隔的媒体类型列表和CSS声明块，其中包含目标媒体的样式规则。

下面示例中的样式声明告诉浏览器在屏幕上以14像素Arial字体显示正文内容，但在打印的情况下将以Timespoint字体显示12点。但是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;
}

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

方法3：使用<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”用于打印。

不同的媒体类型

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

媒体类型