时间:2021-07-01 10:21:17 帮助过:69人阅读
如下面代码:
首先,媒体查询表达式询问了媒体类型(你是一块显示屏吗?),然后询问了媒体特性(显示屏是纵向放置的吗?)。任何纵向放置的显示屏设备都会加载
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请求(这会影响加载速度),所以请谨慎使用该方法。