CSS 媒体类型
样式表最重要的特性之一是它们指定了如何在不同媒体上呈现文档:屏幕上、纸张上、语音合成器上、盲文设备上等等。
目前有两种方式用于指定样式表的媒体依赖关系 −
- 使用 
@media或@import at-rules从样式表中指定目标媒体。 - 
在文档语言内指定目标媒体。
 
@media 规则
@media 规则指定了一组规则的目标媒体类型(用逗号分隔)。
以下是一个示例 −
<style tyle = "text/css">
   <!--
      @media print {
         body { font-size: 10pt }
      }
      @media screen {
         body { font-size: 12pt }
      }
      @media screen, print {
         body { line-height: 1.2 }
      }
   -->
</style>
文档语言
在HTML 4.0中,LINK元素上的media属性指定外部样式表的目标媒体-
以下是一个示例-
<style tyle = "text/css">
   <!--
      <!doctype html public "-//w3c//dtd html 4.0//en">
      <html>
         <head>
            <title>link to a target medium</title>
            <link rel = "stylesheet" type = "text/css" media = "print, 
               handheld" href = "foo.css">
         </head>
         <body>
            <p>the body...
         </body>
      </html>
   -->
</style>
识别的媒体类型
为CSS媒体类型选择的名称反映了相关属性在哪些目标设备上是有意义的。它们给出了媒体类型所指的设备的概念。下面是各种媒体类型的列表−
| 序号 | 值及描述 | 
|---|---|
| 1 | all 适用于所有设备。 | 
| 2 | aural 用于语音合成器。 | 
| 3 | braille 用于点字触觉反馈设备。 | 
| 4 | embossed 用于分页点字打印机。 | 
| 5 | handheld 适用于手持设备(通常是小屏幕,单色,带宽有限)。 | 
| 6 | print 用于分页,不透明材料以及在打印预览模式下屏幕查看的文档。请参阅分页媒体部分。 | 
| 7 | projection 用于投影演示,例如投影仪或打印到透明胶片。请参阅分页媒体部分。 | 
| 8 | screen 主要用于彩色计算机屏幕。 | 
| 9 | tty 用于使用固定间距字符网格的媒体,如电传打字机,终端或具有有限显示功能的便携设备。 | 
| 10 | tv 用于电视类型设备。 | 
注意 - 媒体类型名称不区分大小写。
极客教程