Question

我可以根据浏览器的高度更改加载的CSS文件吗？

例如，如果浏览器小于600px，则使用index_sm.css，否则使用index_lg.css。

Answer 1

在<head>代码中，填写以下内容：

<script type="text/javascript">
    if (window.innerHeight <= 600) {
        loadcss('index_sm.css');
    } else {
        loadcss('index_lg.css');
    }

    function loadcss(file) {
        var el = document.createElement('link');
        el.setAttribute('rel', 'stylesheet');
        el.setAttribute('type', 'text/css');
        el.setAttribute('href', file);
        document.getElementsByTagName('head')[0].appendChild(el);
    }
</script>

Answer 2

这是我能想到的最佳答案，我终于在一个非常有用的网站上偶然发现了这个问题。

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());
    });
});

该网站是：http://css-tricks.com/6206-resolution-specific-stylesheets/

jQuery会动态更改浏览器css，因此如果您调整浏览器大小，css会发生变化。它也适用于所有浏览器。

Answer 3

在supporting browsers中，您可以使用media queries（特别是height media feature）。

Answer 4

正如昆汀所说，你可以使用媒体查询。但是，我认为你已经拥有了n个css文件，并希望在飞行中选择其中一个。只需在文档头中使用这样的内容即可。

<script language="text/javascript">
if (screen.width == 640) {
  document.write('<link rel="stylesheet" type="text/css" href="640.css">');
}
else if (screen.width == 800) {
  document.write('<link rel="stylesheet" type="text/css" href="800.css">');
}
</script>

根据浏览器高度更改Css文件

4 个答案: