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

以下是我们要做的事情：

每当调整浏览器大小时，请检查调整大小是否导致浏览器高度从小（<= 900px）变为大（> 900px），反之亦然。如果没有发生这种情况，例如，如果用户仅从600px调整为601px，我们就不需要替换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;

Answer 4

试试这个：

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

在运行中为不同大小的浏览器窗口应用不同的样式表

4 个答案: