Question

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

Answer 1

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

$(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' />");
    }
});

有没有办法加载关于分辨率的CSS文件？

1 个答案: