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;
}
}测试看看‹/›注意：规则之外的样式规则@media适用于样式表适用的所有媒体类型。内部规则@media在CSS2.1中无效。
方法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）并将其样式仅用于打印媒体。
注意：所有@import语句必须出现在样式表的开头，然后再进行任何声明。样式表中指定的任何样式规则本身都会覆盖导入的样式表中的冲突样式规则。
方法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”用于打印。
提示：您还可以指定多种媒体类型（每种都用逗号分隔，例如media="screen, print"），以及元素的媒体需求。
不同的媒体类型
下表列出了可用于定位不同类型的设备（例如打印机，手持设备，计算机屏幕等）的各种媒体类型。
媒体类型 | 描述 |
|---|---|
| all | 用于所有媒体类型的设备。 |
| aural | 用于语音和声音合成器。 |
| braille | 用于盲文触觉反馈设备。 |
| embossed | 用于页面盲文打印机。 |
| handheld | 用于小型或手持设备-通常是小屏幕设备，例如手机或PDA。 |
| 用于打印机。 | |
| projection | 用于投影演示，例如投影仪。 |
| screen | 主要用于彩色计算机屏幕。 |
| tty | 用于使用固定间距字符网格的媒体，例如电传打字机，终端或显示能力有限的便携式设备。 |
| tv | 用于电视类型的设备-低分辨率，彩色，可滚动性有限的屏幕，有声音。 |
警告：但是有几个媒体类型根据不同浏览器情况选择使用，因为大多数的浏览器只支持all，screen以及print媒体类型。