CSS引用鲜为人知的媒体查询_html/css

如下面代码：

首先，媒体查询表达式询问了媒体类型（你是一块显示屏吗？），然后询问了媒体特性（显示屏是纵向放置的吗？）。任何纵向放置的显示屏设备都会加载

portrait-screen.css样式表，其他设备则会忽略。

在媒体查询开头追加not则会颠倒改查询的逻辑。

例如

只有视口宽度大于800像素的显示屏设备才会加载文件

往深处延伸，可以用逗号来表示或运算，只要满足其中一个即可。

当然除了媒体查询不仅用于引用css样式表，也可以写到样式表中

@media screen and (max-device-width:400px){	h1{color:green}}@media screen and (max-device-width:960px){	h1{color:red}}

@import url("phone.css") screen and (max-width:360px)

但是切记使用css的@import方式会增加HTTP请求（这会影响加载速度），所以请谨慎使用该方法。