Foundation 有一些 JS 函数来检测媒体查询。我的问题是如何在 Medium-up 媒体查询中定义一些函数?
确切地说,我想在中上启动Foundation Equalizer,或者实际上停止在 Mobile 上工作。
谢谢 :)
Foundation 有一些 JS 函数来检测媒体查询。我的问题是如何在 Medium-up 媒体查询中定义一些函数?
确切地说,我想在中上启动Foundation Equalizer,或者实际上停止在 Mobile 上工作。
谢谢 :)
@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');
}
~阿文德
Foundation 6 支持名为“equalizeOn”的均衡器属性,它允许您设置断点。均衡器将在此断点及以上(移动优先方法)中完成它的工作。
这是文档的链接(部分,插件选项): http: //foundation.zurb.com/sites/docs/equalizer.html
您可以通过 HTML 中的数据属性或通过 JavaScript 设置选项。