Javascript 根据屏幕大小用jQuery替换样式表

大家好，我想知道是否有人可以帮忙，我正在尝试使用jQuery创建一个响应性强的站点（必须这样做，因为目标受众在IE7/8上，而且css3-mediaqueries.js似乎也会干扰我正在使用的jQuery UI）。我使用下面的脚本来检测宽度和高度，并相应地应用样式，它对宽度非常有效，但对高度无效，它加载SMstyle.css，然后用style.css覆盖。我正在努力学习JavaScript，但目前还不是很强，我知道还有更简单的方法！任何帮助都将不胜感激

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

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

    function adjustStyle(height) {
        height = parseInt(height);
        if (height < 800
        ) {
            $("#size-stylesheet").attr("href", "css/SMstyle.css");
        } else {
            $("#size-stylesheet").attr("href", "css/style.css");
        }
    }

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

    });

功能调整样式（宽度）{
宽度=parseInt（宽度）；
如果（（宽度>=701）和&（宽度<1200
)) {
$（“#大小样式表”）.attr（“href”，“css/SMstyle.css”）；
}否则{
$（“#大小样式表”）.attr（“href”，“css/style.css”）；
}
}
$（函数（）{
adjustStyle（$（this）.width（））；
$（窗口）。调整大小（函数（）{
adjustStyle（$（this）.width（））；
});
});
功能调整样式（高度）{
高度=parseInt（高度）；
如果（高度<800
) {
$（“#大小样式表”）.attr（“href”，“css/SMstyle.css”）；
}否则{
$（“#大小样式表”）.attr（“href”，“css/style.css”）；
}
}
$（函数（）{
调整样式（$（this）.height（））；
$（窗口）。调整大小（函数（）{
调整样式（$（this）.height（））；
});
});

重构（未测试）

功能调整样式（宽度、高度）{
宽度=parseInt（宽度）；
高度=parseInt（高度）；
如果（（宽度>=701）和&（宽度<1200））| |（高度<800））
$（“#大小样式表”）.attr（“href”，“css/SMstyle.css”）；
其他的
$（“#大小样式表”）.attr（“href”，“css/style.css”）；
}
$（函数（）{
调整样式（$（this.width（），$（this.height（））；
$（窗口）。调整大小（函数（）{
调整样式（$（this.width（），$（this.height（））；
});
});

在处理响应性布局时，您并不真正关心高度。整个概念是，如果内容不能适应宽度，它就会塌陷（从而增加高度）

编辑：

我认为您需要使用$（document）而不是$（this），因为当您手动触发$（this）和由调整大小事件触发$（this）时，其范围将不同

function adjustStyle() {
    var width = $(document).width();
    var height = $(document).height();
    if (((width >= 701) && (width < 1200)) || (height < 800)) {
        $("#size-stylesheet").attr("href", "css/SMstyle.css");
    } else {
        $("#size-stylesheet").attr("href", "css/style.css");
    }
}

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

---

您是以PX或百分比指定高度吗？如果没有明确定义每个父元素，高度将无法以百分比表示。您可能需要在PX中动态设置高度，而不是调用样式表。。。如果我的直觉是正确的。谢谢，本。我用像素来称呼你问谁。有些人会争辩说，垂直响应也很重要。在本例中，高度很重要，因为我在禁用localScroll和physical scrolling的情况下使用了paralax效果。该网站的一些用户的笔记本电脑屏幕尺寸为1366x768，因此高度成为一个重要因素。感谢Antila！它工作得很好，你阻止了我把头发扯下来！不，它看起来像是加载了正确的高度SMstyle.css，然后反弹回style.css，只在窗口调整大小时返回SMstyle.css…如果是这样的话，应该有其他脚本这样做，我还想看看你的HTML

function adjustStyle() {
    var width = $(document).width();
    var height = $(document).height();
    if (((width >= 701) && (width < 1200)) || (height < 800)) {
        $("#size-stylesheet").attr("href", "css/SMstyle.css");
    } else {
        $("#size-stylesheet").attr("href", "css/style.css");
    }
}

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

$(function() {
    console.log('Scope', $(this)); // Scope is DOM-element
    $(window).resize(function() {
        console.log('Scope', $(this)); // Scope is Window object.
    });
});