CSS有条件使用@import

Question

假设我有2个独立的CSS； desktop.css和ipad.css现在，已经在100个diff HTML中调用了desktop.css，我现在想在这100个html上应用新的ipad.css。 现在在desktop.css中，我可以在顶部使用@import吗

@import "ipad.css"

然后在ipad.css中，我使用iPad的@media检查

@media only screen and (device-width : 768px) 
{  
/* All iPad style definitions here */
}

我的问题是；

1. 这种方法是否可行，是否可行，即单独的CSS将应用于台式机和iPad？

2. 由于我正在编写@import，因此即使ipad.css是台式机，它也会始终加载，并且会对性能（页面加载）产生巨大影响

请提出任何其他方法（除非使用链接media = .device-width ..），因为我不想更新html页面本身内的任何内容。

谢谢。

Answer 1

这种方法是否可行，是否可行，即单独的CSS将应用于台式机和iPad？

否。它假定iPad和仅iPad的设备宽度为768px。

由于我正在编写@import，因此即使ipad.css是台式机也可以始终加载它。

媒体查询位于导入的文件内部，因此必须加载该文件，因为浏览器可以知道存在媒体查询。

会对性能（网页加载）产生巨大影响

将会有一个额外的HTTP请求。 但是，文件中将包含许多数据。 但是，“巨大”是一个相对的概念。

请提出其他建议

将媒体查询应用于@import语句本身。