CSS引用鲜为人知的媒体查询
浏览数：40 /
时间：2015年06月09日
媒体查询能使我们根据设备的各种功能特性来设定相应的样式。
如下面代码：
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css"/>
引用某一样式表。主要看media属性。
首先，媒体查询表达式询问了媒体类型（你是一块显示屏吗？），然后询问了媒体特性（显示屏是纵向放置的吗？）。任何纵向放置的显示屏设备都会加载
portrait-screen.css样式表，其他设备则会忽略。
在媒体查询开头追加not则会颠倒改查询的逻辑。
例如
<link rel="stylesheet" media="not screen and (orientation:portrait)" href="portrait-screen.css"/>还可以这样用，
限制只有视口宽度大于800像素的显示屏设备才会加载文件
<link rel="stylesheet" media="not screen and (orientation:portrait) and (min-width:800px)" href="portrait-screen.css"/>
往深处延伸，可以用逗号来表示或运算，只要满足其中一个即可。
当然除了媒体查询不仅用于引用css样式表，也可以写到样式表中
@media screen and (max-device-width:400px){
h1{color:green}
}
@media screen and (max-device-width:960px){
h1{color:red}
}并且更有些丧心病狂的用法是在css样式表中用@import指令在当前样式表中引用其他样式表。例如
@import url("phone.css") screen and (max-width:360px)
但是切记使用css的@import方式会增加HTTP请求（这会影响加载速度），所以请谨慎使用该方法。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
