今天小编跟大家讲解下有关CSS教程:css属性之媒体（Media）类型 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS教程:css属性之媒体（Media）类型 的相关资料，希望小伙伴们看了有所帮助。
样式单的一个最重要的特点就是它可以作用于多种媒体 比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体 如"font-size"属性只对可卷动的媒体类型有效（屏幕）。
[email protected]@media引入：
@import url(loudvoice.css) speech;@media print {}
也可以在文档标记中引入媒体： <link rel="stylesheet" type="text/css" media="print" href="foo.css"> 可以看出 @[email protected] 前者引入外部的样式单用于媒体类型 [email protected]@import加样式单文件的URL地址再加媒体类型 可以多个媒体共用一个样式单 媒体类型之间用" "[email protected] [email protected]型：
SCREEN：指计算机屏幕。PRINT：指用于打印机的不透明介质。PROJECTION：指用于显示的项目。BRAILLE：盲文系统 指有触觉效果的印刷品。AURAL：指语音电子合成器。TV：指电视类型的媒体。HANDHELD：指手持式显示设备（小屏幕 单色）ALL：适合于所有媒体。
手机端（移动端）自适应样式 @media 的使用
通用手机端样式：
@media all and (orientation : portrait) [email protected] 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的设备 [email protected] (min-width: 992px){ //>=992的设备 [email protected] (min-width: 1200){ //>=1200的设备 }
注意下顺序 [email protected] (min-width: 768px)写在了下面那么很悲剧 因为css文件是从上至下读取的 后面的css优先级会更高
@media (min-width: 1200){ //>=1200的设备 [email protected] (min-width: 992px){ //>=992的设备 [email protected] (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时 小的放上面大的在下面 同理如果是用max-width那么就是大的在上面 小的在下面
@media (max-width: 1199){ //<=1199的设备 [email protected] (max-width: 991px){ //<=991的设备 [email protected] (max-width: 767px){ //<=768的设备 }
到此文章就结束了
来源：爱蒂网
