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

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();