如何加载不同屏幕尺寸的不同css文件？

Question

如何在屏幕width = 1360px加载屏幕width = 1600px和 xyz.css 时加载 abc.css 文件。我怎么能用javascript做到这一点？

Answer 1

@import url("abc.css") (width: 1360px);
@import url("xyz.css") (width: 1600px);

@import支持media queries。

演示：http://jsfiddle.net/DerekL/assz3/

Answer 2

您可以在链接标记中指定宽度，即： -

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

此样式表仅在当前浏览器窗口宽度介于701和900像素之间时生效。

Answer 3

来自css-tricks

使用javascript / jQuery

<强> HTML

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

<强>的jQuery

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

使用媒体

<强> HTML

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

Read More ( CSS-Tricks )