Question

嗨，我想知道是否有人可以提供帮助，我正在尝试使用jQuery创建一个响应式网站（这样做是因为目标受众是在IE7 / 8上，css3-mediaqueries.js似乎干扰了jQuery UI我也在使用）。我使用以下脚本来检测宽度和高度并相应地应用样式，它适用于宽度而不是高度，它加载 SMstyle.css 然后用样式覆盖。 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());
        });

    });

Answer 1

重构（未经测试）

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

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

Answer 2

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

修改

我相信你需要使用$（document）而不是$（this），因为$（this）的范围在手动触发时以及由resize事件触发时会有所不同。

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

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

2 个答案: