javascript - 在媒体查询中调用/触发 Foundation JS

Question

Foundation有一些JS函数可以检测Media Queries 。我的问题是如何定义一些仅在中型媒体查询中触发的函数？

正是我想解雇Foundation Equalizer中上或实际上停止在移动设备上工作。

谢谢:)

Answer 1

@parhum，

我不确定这是否是正确的方法，但您始终可以删除 data-equalizer 属性并将其重新添加。

// media query event handler
if (matchMedia) {
    var mq = window.matchMedia("(min-width: 767px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {

    if (mq.matches) {
        // window width is at least 767px
        $('.row').attr('data-equalizer','data-equalizer');
    }
    else {
        // window width is less than 767px
        $('.row').removeAttr('data-equalizer');
    }

}

由于某种原因，我无法使其正常工作

Foundation.utils.register_media('custom', "(min-width: 767px)");

if (matchMedia(Foundation.media_queries['custom']).matches) {
    // window width is at least 767px
    $('.row').attr('data-equalizer', 'data-equalizer');
} else {
    // window width is less than 767px
    $('.row').removeAttr('data-equalizer');
}

预览:@Fiddle |代码:@Editor

~阿尔温德