大家好，又见面了，我是你们的朋友全栈君。
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>
p{
color: #ff0000
}
</style>
3、@import方式
示例：
<style>
@import url(“xxx.css”) “screen,print”;
</style>
@import url(“xxx.css”) “screen,print”;
</style>
4、在style里为某些样式指定media
示例：
<style>
@media speech {
p{
color: #ff0000
}
}
@media print {
p{
color: blue;
}
}
</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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/141522.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
