首先要明白一点，我们平时写的HTML页面，可能在不同的媒体类型中显示，如可能显示在屏幕sreen上，也可能显示在纸质print上。那么当页面在不同的媒体类型中显示时，需要的样式可能是不一样的。比如，一般在screen上显示时，页面字体要大一些，在纸质媒体显示时，页面字体要小一些。那么如何告诉别人某个样式是适用于何种媒体类型的呢？这就要靠声明media type来实现了。
@media screen, 3D {
P { color: green; }
}
这里，3D是不存在的媒体类型，则浏览器会将其解析为@media screen {
P { color: green; }
}
<span style="font-size:14px;"><head>
<link rel="stylesheet" type="text/css" href="mystyle1.css" media="screen,print"><span style="color:#ff6666;"><!--mystyle1样式表只应用于screen和print媒介--></span>
<style>
@import url("mystyle2.css") screen,print;<span style="color:#ff6666;">/*mystyle2样式表只应用于screen和print媒介*/</span>
@media screen {
body{font-size:14px;} <span style="color:#ff6666;"> /*在screen媒介中body字体为14px*/</span>
}
@media print {
body{font-size: 10px;} <span style="color:#ff6666;"> /*在print媒介中body字体为10px*/</span>
}
body{color: #ff0000;}<span style="color:#ff6666;">/*若样式没有声明媒体类型，相当于媒体类型为all，则此样式会应用于所有的媒体类型*/</span>
</style>
</head></span>
原文地址：http://blog.csdn.net/ruoyiqing/article/details/39208707
