CSS @import的条件使用

CSS Conditional Use of @import

本文关键字：条件 @import CSS      更新时间：2023-09-26

假设我有两个独立的CSS;桌面。css和ipad。css现在桌面。css已经在100个不同的html中被调用了我现在想在这100个html中应用一个新的ipad。css。那么在桌面。css中，我可以在顶部使用@import吗，输入

@import "ipad.css"

然后在iPad。css中，我使用@media检查iPad，使用

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

我的问题是;

  1. 这种方法好吗?它会工作吗?也就是说，单独的CSS将应用于桌面和iPad?

  2. 既然我写的是@import，会ipad。css总是被加载，即使它是桌面和这是否会产生巨大的影响性能(页面加载)

请建议任何其他方法(除了使用链接媒体=.device-width..)，因为我不想在html页面本身更新任何东西。

谢谢。

这种方法好吗?它会工作吗?也就是说，单独的CSS将应用于桌面和iPad?

。它假设iPad且只有iPad的device-width为768px。

因为我写的是@import, ipad.css是否总是被加载，即使它是桌面和

媒体查询在导入的文件中，因此必须加载文件，因为浏览器可以意识到有媒体查询。

将会对性能(页面加载)产生巨大的影响

将有一个额外的HTTP请求。无论文件中有多少数据都必须加载。"巨大"是一个相对的概念。

请建议其他方法

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

相关文章：