有没有办法加载有关分辨率的 css 文件?

Question

我有一个非常大的样式.css文件，它的重量为1,1MB，我需要减少它，因为它会影响我网站的性能。我计划将代码分发到许多文件中，关于分辨率，我想知道是否有办法只加载几个文件，首先检查分辨率或设备？ 喜欢在媒体查询中使用@import？ 还是用JS检查？ 还是 html 元标记？ 或者一种先加载标题样式然后调用其余样式的方法？

Answer 1

您可以通过 jquery on 文档加载事件来完成。

$(document).ready(function(){
if (window.innerWidth >= 1280) //if ($(window).width() >= 1280)
$("head").append("<link id='yournewcss1' href='desktop.css' type='text/css' rel='stylesheet' />");
else if (window.innerWidth >= 768 && window.innerWidth < 1280) {
$("head").append("<link id='yournewcss2' href='midreso.css' type='text/css' rel='stylesheet' />");
}
else if (window.innerWidth >= 320 && window.innerWidth < 768) {
$("head").append("<link id='yournewcss3' href='mobile.css' type='text/css' rel='stylesheet' />");
}
});