13518219792
这篇文章主要为大家详细介绍了css属性之媒体类型，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名申请、网页空间、营销软件、网站建设、溆浦网站维护、网站推广。
.jpg)
前言：
样式单的一个最重要的特点就是它可以作用于多种媒体，比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体，如"font-size"属性只对可卷动的媒体类型有效（屏幕）。
声明一个媒体属性可以用@import或@media引入：
@import url(loudvoice.css) speech;
@media print {
/* style sheet for print goes here */
}
也可以在文档标记中引入媒体：
可以看出，@import和@media的区别在于，前者引入外部的样式单用于媒体类型，后者直接引入媒体属性。
@import的使用方法是@import加样式单文件的URL地址再加媒体类型，可以多个媒体共用一个样式单，媒体类型之间用"，"分割符分开。@media用法则是把媒体类型放在前面，其他规则和rule-set基本一样。
下面列出各种媒体类型：
SCREEN：指计算机屏幕。
PRINT：指用于打印机的不透明介质。
PROJECTION：指用于显示的项目。
BRAILLE：盲文系统，指有触觉效果的印刷品。
AURAL：指语音电子合成器。
TV：指电视类型的媒体。
HANDHELD：指手持式显示设备（小屏幕，单色）。
ALL：适合于所有媒体。
手机端（移动端）自适应样式 @media 的使用
通用手机端样式：
@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*横屏*/
}
指定手机端高度样式：
@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx < 960的设备}
根据不同的设备设定的样式：
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序，如果你把@media (min-width: 768px)写在了下面那么很悲剧，因为css文件是从上至下读取的，后面的css优先级会更高
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
以上就是css属性之媒体类型相关介绍的详细内容了，看完之后是否有所收获呢？如果想了解更多相关内容，欢迎来创新互联行业资讯！
