5

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

    });
4

2 回答 2

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());
    });
});
于 2012-12-20T17:59:01.807 回答
1

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

编辑：

我相信您需要使用 $(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.
    });
});
于 2012-12-20T18:08:36.647 回答