CSS条件使用@import

Question

说我有2个单独的CSS; desktop.css和ipad.css 现在已经在100个差异HTML中调用了desktop.css，我想现在在这100个htmls上应用一个新的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. 这种做法是否正常，是否可行，即sepearte CSS将应用于桌面版iPad？

2. 因为我正在写@import，所以 ipad.css总是被加载，即使它是桌面和     会对此产生巨大影响吗？     性能（页面加载）

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

谢谢。

Answer 1

  

这种方法是否正常，是否可行，即sepearte CSS将应用于桌面版iPad？

没有。它假设iPad和iPad只有768px的设备宽度。

  

由于我正在编写@import，即使它是桌面版，ipad.css也会被加载，

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

  

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

将会有一个额外的HTTP请求。但是，必须加载文件中的大量数据。 “巨大”虽然是一个相对的概念。

  

请建议任何其他方法

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