动态为不同大小的浏览器窗口应用不同的样式表答案

【问题标题】：Applying different stylesheets for differently sized browser windows on the fly动态为不同大小的浏览器窗口应用不同的样式表
【发布时间】：2012-05-22 17:22:28
【问题描述】：

如果浏览器高于或低于某个高度，我将使用以下代码选择不同的样式表。当您登陆页面或调整窗口大小然后刷新时效果很好。但是有什么办法可以调整它以在调整窗口大小时动态选择正确的样式表？

if (window.innerHeight <= 900) {
    loadcss('css/container_sm.css');
} else {
    loadcss('css/container_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);
}

【问题讨论】：

CSS Media Queries as Browser Resizes?的可能重复
@Quentin 我不明白这是怎么复制的。您提到的链接使用 CSS3 媒体查询，而 OP 不一定要使用 CSS3 媒体查询。您提到的链接有助于进一步阅读，但它不涉及此问题的答案。

标签： javascript css

【解决方案1】：

也许值得研究一下现有的库，例如twitter bootstrap？它们提供开箱即用的响应式样式表，可在调整窗口大小时自动调整。

【讨论】：

【解决方案2】：

您可以在脚本中添加事件句柄。用jquery

$(window).resize(function(){
   if (window.innerHeight <= 900) {
    loadcss('css/container_sm.css');
   } else {
    loadcss('css/container_lg.css');
   }

})

没有jquery window.onresize = function(){}

【讨论】：

这是非常低效的。它会在每次调整浏览器大小时调用loadcss()。因此，如果用户通过拖动浏览器的边缘来调整大小，则每次鼠标移动都会调用 loadcss() 函数。此外，它不会替换现有的 LINK 元素。相反，它会在每次调整大小时不断附加新的 LINK 元素。如果用户通过将浏览器从 1000px 的高度拖动到 200px 的高度来调整浏览器的大小，您最终会在元素上附加 801 个元素，并且它会随着每次调整大小而不断增长。跨度>

【解决方案3】：

试试这个：

document.body.onresize = function (){
    if (window.innerHeight <= 900) {
        loadcss('css/container_sm.css');
    } else {
        loadcss('css/container_lg.css');
    }
};

【讨论】：

这非常有效，原因与我在此页面上对 Trinh Hoang Nhu 的解决方案的评论中提到的相同。

【解决方案4】：

这是我们必须做的：

每当调整浏览器大小时，请检查调整大小是否导致浏览器高度从小 ( 900 像素)，反之亦然。如果这没有发生，例如，如果用户只将大小从 600 像素调整到 601 像素，我们就不需要替换 CSS。
每当我们检测到浏览器的大小从小变大或反之亦然时，我们都会仔细选择旧的container_lg.css 或container_sm.css 并将其删除。
然后，我们添加适当的 CSS。

代码如下：

var SMALL = 0;
var BIG = 1;
var previousSize = null;
var thresholdHeight = 400;
var firstCall = true;;

function selectCSS()
{
    if ((previousSize == null || previousSize == BIG) &&
         window.innerHeight <= thresholdHeight) {

        removeOldCSS();
        loadNewCSS('css/container_sm.css');
        previousSize = SMALL;

    } else if ((previousSize == null || previousSize == SMALL) &&
                window.innerHeight > thresholdHeight) {

        removeOldCSS();
        loadNewCSS('css/container_lg.css');
        previousSize = BIG;
    }
}

function removeOldCSS(file)
{
    var headNode = document.getElementsByTagName('head')[0];
    var linkNodes = document.getElementsByTagName('link');
    for (var i = 0; i < linkNodes.length; i++) {
        var linkNode = linkNodes[i];
        if (linkNode.parentNode == headNode &&
            linkNode.href.search(/css\/container_(?:sm|lg).css$/) >= 0) {

            headNode.removeChild(linkNode);
        }
    }
}

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

window.onload = selectCSS;
window.onresize = selectCSS;

【讨论】：