时间戳

首页 > 解决方案 > 我的@import 查询无法正常工作

html - 我的@import 查询无法正常工作

问题描述

我为我的网站创建了两个不同的 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 浏览器的检查模式下模拟它时，根本无法激活 mobileVersion.css 表。

这是为什么？我做错了什么？

标签： htmlcssimportmedia-queries

解决方案

我不确定这一点，但看起来样式表总是被下载，即使它们没有被使用 [1]。

另一种解决方案是移动媒体查询，以便仅在符合条件时应用类（例如，将所有类包装在媒体查询中）。

编辑：这也可能有帮助 [2]

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries [2] @import 样式在媒体查询中不起作用

推荐阅读