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

Destroy a Jquery function when media query changes

本文关键字：Jquery 函数 查询 媒体      更新时间：2023-09-26

希望你能帮我。

我已经搜索了论坛，我想这是一个特殊的情况。

我正在构建的项目由媒体查询（响应式）提供动力，我有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();

以下是我在移动优先的方法中要做的，你不需要担心"破坏"任何简单的设置高度为auto:

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();
相关文章：