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

〜Arvind的

Answer 2

Foundation 6支持名为“equalizeOn”的Equalizer属性，该属性允许您设置断点。均衡器会为这个断点和向上移动（移动优先方法）。

这是docs的链接（Section，Plugin Options）： http://foundation.zurb.com/sites/docs/equalizer.html

您可以通过HTML或JavaScript中的数据属性设置选项。

在媒体查询中调用/触发基础JS

2 个答案: