我为我的网站创建了两个不同的 CSS 工作表(移动版和桌面版),我希望用户根据他们使用的设备提取每个工作表。我尝试使用 @import
查询,但它似乎无法正常工作。测试发现我写的时候是激活了手机版
@import url('mobileVersion.css') only screen and (max-width: 980px);
虽然如果我降低宽度数字则无法激活移动 css 表。 另一方面,如果我把两张纸都放进去
@import url('mobileVersion.css') only screen and (max-width: 980px);
@import url('desktopVersion.css');
在Chrome浏览器的inspect模式下模拟mobileVersion.css sheet根本无法激活
这是为什么呢?我做错了什么?
最佳答案
我对此不确定,但看起来样式表即使未被使用也总是被下载 [1]。
另一种解决方案是移动媒体查询,以便仅在符合条件时应用类(例如,将所有类包装在媒体查询中)。
编辑:这也可能有助于 [2]
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries [2] @import styles not working in a media query
关于html - 我的@import 查询无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51900331/