CSS中的媒体类型media type

madia type作用

首先要明白一点，我们平时写的HTML页面，可能在不同的媒体类型中显示，如可能显示在屏幕sreen上，也可能显示在纸质print上。那么当页面在不同的媒体类型中显示时，需要的样式可能是不一样的。比如，一般在screen上显示时，页面字体要大一些，在纸质媒体显示时，页面字体要小一些。那么如何告诉别人某个样式是适用于何种媒体类型的呢？这就要靠声明media type来实现了。

如何声明media type

常用媒体类型有：all，screen，print，handled，speech等；

注意媒体类型是大小写敏感的，只能是小写；

当浏览器遇到错误的媒体类型，或者不存在的媒体类型，就会忽略此媒体类型的存在，如：

@media screen, 3D {
  P { color: green; }
}

这里，3D是不存在的媒体类型，则浏览器会将其解析为

@media screen {
  P { color: green; }
}

如何为样式声明媒体类型？

1、<link>标签的media属性

示例：  

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

2、<style>标签的media属性

示例：

    <style media="all" type="text/css">
        p{
            color: #ff0000
        }
    </style>

3、@import方式

示例：

    <style>
        @import url("xxx.css") "screen,print";
    </style>

4、在style里为某些样式指定media

示例：

    <style>
        @media speech {
            p{
                color: #ff0000
            }
        }
        @media print {
            p{
                color: blue;
            }
        }
    </style>

5、若没有指定media，则media为默认值“all”，即此样式适用于所有媒体类型

更多媒体类型相关知识请参阅W3C官网：http://www.w3.org/TR/CSS21/media.html