大家好,又见面了,我是你们的朋友全栈君。
首先要明白一点,我们平时写的HTML页面,可能在不同的媒体类型中显示,如可能显示在屏幕sreen上,也可能显示在纸质print上。那么当页面在不同的媒体类型中显示时,需要的样式可能是不一样的。比如,一般在screen上显示时,页面字体要大一些,在纸质媒体显示时,页面字体要小一些。那么如何告诉别人某个样式是适用于何种媒体类型的呢?这就要靠声明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
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/141522.html原文链接:https://javaforall.cn