导入css文件使用判断条件实现

下面是使用判断条件实现导入css文件的攻略，包含以下几个步骤：

1. 导入条件判断的js文件

为了实现动态导入css文件，我们需要使用条件判断的JavaScript文件。我们可以创建一个js文件（比如叫做"loadCSS.js"），然后在html文件中引入该文件。

<script src="js/loadCSS.js"></script>

2. 判断条件导入CSS文件

下一步是，在js文件中编写条件判断语句，以确定什么时候加载css文件。以下是两个示例：

示例1：仅在浏览器宽度大于768像素时加载CSS文件

if (window.innerWidth > 768) {
   loadCSS('/path/to/file.css');
}

这个例子中，window.innerWidth是指浏览器窗口的宽度。如果窗口宽度大于768像素，则会加载位于 "/path/to/file.css"路径下的CSS文件。

示例2：仅在IE浏览器中加载CSS文件

if (navigator.userAgent.indexOf('MSIE') !== -1) {
    loadCSS('/path/to/file.css');
}

这个例子中，navigator.userAgent是指浏览器的user agent字符串，它包含了浏览器的厂商、版本、操作系统等信息。如果浏览器是IE浏览器，则会加载位于 "/path/to/file.css"路径下的CSS文件。

3. 在loadCSS.js文件中编写代码

在js文件中定义loadCSS函数，该函数接受一个参数（css文件的路径），用来加载指定的css文件：

function loadCSS(path) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = path;
    document.getElementsByTagName("head")[0].appendChild(link);
}

这个函数会创建一个新的link元素，然后将其添加到页面的head元素中。当浏览器遇到link元素时，它会自动下载和应用该元素所指向的CSS文件。

结论

以上就是使用条件判断实现动态导入CSS文件的攻略。您可以通过编写适当的条件判断语句，在不同的浏览器或屏幕大小下加载不同的CSS文件。只需要简单地调整条件判断语句，就可以根据需要加载不同的CSS文件。