我想根据屏幕大小通过Javascript加载CSS文件

Question

我想根据屏幕大小加载 CSS 文件。

例如，如果屏幕宽度小于 576px，则我们必须加载 xs_0.css，反之亦然

<script>
    if (window.innerWidth < 576) {
        let head = document.getElementsByTagName('HEAD')[0];
        let link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = 'xs_0/style.css';
        head.appendChild(link);
    }
</script>

Answer 1

<link>有一个名为media的属性。 这里可以应用媒体查询来控制不同的CSS文件的使用。

<link href="default.css" rel="stylesheet" />
<link href="xs_0.css" rel="stylesheet" media="screen and (max-width: 576px)" />

这比使用 JavaScript 更易于维护，您需要注意 window 的大小调整、方向、缩放等。

Answer 2

您可以使用媒体查询并为每个大小指定 css 规则，而不是加载不同的 CSS 文件。

.YourDiv {
    background-color: red;
}
@media (max-width: 900px) {
    .YourDiv
        {background-color: blue;}
}
@media (max-width: 600px) {
    .YourDiv
        {background-color: green;}
}

Answer 3

function loadCSS(src){
        let myCSS = document.createElement( "link" );
        myCSS.rel = "stylesheet";
        myCSS.href = src;
        // insert it at the end of the head in a legacy-friendly manner
        document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
    }

Answer 4

<script>
        if (window.innerWidth < 576) {
            let head = document.getElementsByTagName('HEAD')[0];
            let link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = 'xs_0/style.css';
            head.appendChild(link);
        } else if (window.innerWidth >= 576 & window.innerWidth < 768) {
            let head = document.getElementsByTagName('HEAD')[0];
            let link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = 's_576/style.css';
            head.appendChild(link);
        } else if (window.innerWidth >= 768 & window.innerWidth < 992) {
            let head = document.getElementsByTagName('HEAD')[0];
            let link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = 'm_768/style.css';
            head.appendChild(link);
        } else if (window.innerWidth >= 992 & window.innerWidth < 1200) {
            let head = document.getElementsByTagName('HEAD')[0];
            let link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = 'l_992/style.css';
            head.appendChild(link);
        } else if (window.innerWidth > 1200) {
            let head = document.getElementsByTagName('HEAD')[0];
            let link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = 'xl_1200/style.css';
            head.appendChild(link);
        } else {
            console.log("error")
        }
    </script>