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; }}
如何为样式声明媒体类型,见如下示例代码:
@media screen { body{font-size:14px;} /*在screen媒介中body字体为14px*/ } @media print { body{font-size: 10px;} /*在print媒介中body字体为10px*/ } body{color: #ff0000;}/*若样式没有声明媒体类型,相当于媒体类型为all,则此样式会应用于所有的媒体类型*/
更多媒体类型相关知识请参阅w3c官网: http://www.w3.org/tr/css21/media.html