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

Question

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

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

Answer 1

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

Answer 2

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

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

})

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

Answer 3

这是我们必须做的：

1. 每当调整浏览器大小时，请检查调整大小是否导致浏览器高度从小（<= 900px）变为大（> 900px），反之亦然。如果这还没有发生，例如如果用户只将大小从 600px 调整到 601px，我们不需要替换 CSS。
2. 每当我们检测到浏览器已经从小到大调整大小，或者反之亦然，我们都会仔细选择旧的container_lg.cssorcontainer_sm.css并将其删除。
3. 然后，我们添加适当的 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;

Answer 4

尝试这个：

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