Question

希望你能帮助我。

我在论坛中搜索过，我想这是一个特例。

我正在构建的项目使用媒体查询（响应），我有3列，有时4列需要相等高度。我在Jquery中开发了一个很好用的脚本。见下文

var maxHeight = 0;
function setHeight(column) {
    $(window).load(function () {
        column = $(column);
        column.each(function () {
            if ($(this).height() > maxHeight) {
                maxHeight = $(this).height();
            }
        });

        column.height(maxHeight);
    });
}

setHeight('.package-container .package-3');

但是当我要使用移动版低于767px 时，如何销毁此 setHeight（）功能而无需刷新页。

其他替代方案，我可以使用enquire.js，javascript媒体查询在下面执行此操作，但如果我直接从桌面/平板电脑移动到手机，我无法让它工作而无需刷新。如下所示

enquire.register("(max-width:767px)", {
    match : function() {
        setHeight(null);
    }
}).listen();

Answer 1

以下是我在移动第一种方法中所做的事情，您不必担心“破坏”任何简单的设置高度为自动：

enquire.register("screen and (min-width : 768px)", {
    match : function() {
        // set equal height for columns
        setHeight('.package-container .package-3');
    },
    unmatch : function() {
        // set auto height
        $('.package-container .package-3').height("auto");
    }
}).listen();

媒体查询更改时销毁Jquery函数

1 个答案: