css属性之媒体类型的相关介绍
这篇文章主要为大家详细介绍了css属性之媒体类型,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名申请、网页空间、营销软件、网站建设、溆浦网站维护、网站推广。
前言:
样式单的一个最重要的特点就是它可以作用于多种媒体,比如页面、屏幕、电子合成器等等。特定的属性只能作用于特定的媒体,如"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属性之媒体类型相关介绍的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来创新互联行业资讯!
分享题目:css属性之媒体类型的相关介绍
文章源于:http://pwwzsj.com/article/igdhgp.html