仅使用 Zurb Foundation 5 的大型数据均衡器？答案

【问题标题】：data-equalizer on large only with Zurb Foundation 5?仅使用 Zurb Foundation 5 的大型数据均衡器？
【发布时间】：2016-04-05 23:29:22
【问题描述】：

有谁知道如何以及是否可以将数据均衡器限制为大或更高？我有 3 列在大视图中使用它，但在中视图和低视图中并不需要它。

【问题讨论】：

标签： zurb-foundation zurb-foundation-5

【解决方案1】：

将此data-equalizer-mq="large-up" 添加到您的均衡器 div 中。要了解更多信息，请阅读此link RESPONSIVE EQUALIZER 主题

【讨论】：

【解决方案2】：

根据这个issue，这还不容易。

但是，以下内容可能对您有用。此示例假定您使用的是 Foundation 5 附带的默认媒体查询断点。基本上，此示例所做的是查看窗口大小，并根据大小设置数据均衡器属性。

<div class="row equal" data-equalizer>
    <div class="medium-6 columns panel equal-watch" data-equalizer-watch>
        <h1>hello</h1>    
        <p>(lots of text, presumably)</p>
        <p>(lots of text, presumably)</p>
    </div>
    <div class="medium-6 columns panel equal-watch" data-equalizer-watch>hi</div>
</div>

javascript：

function setEqualizer() {
    // get the width in ems.
    var widthEms = $(window).width() / parseFloat($('html').css('font-size'));
    if (widthEms < 64.063) {
        $('.equal').removeAttr('data-equalizer');
        $('.equal-watch').removeAttr('data-equalizer-watch');
    } else {
        $('.equal').attr('data-equalizer', '');
        $('.equal-watch').attr('data-equalizer-watch', '');
    }
    $(document).foundation('equalizer', 'reflow');
}

// set Equalizer upon load
setEqualizer();

我无法使用窗口调整大小检测器完成这项工作，但它在页面加载时确实有效。尝试在此小提琴中调整输出窗格的大小并重新运行它。

jsfiddle example

希望这可以帮助您开始使用更好的解决方案。

【讨论】：

当我明天再次回到特定项目上工作时，我会试一试，并让你知道它是否有效。提前致谢。

【解决方案3】：

感谢@chad，

$(window).on('load resize', function () {
    var minWidth = 640;
    var viewport = {
        width: $(window).width(),
        height: $(window).height()
    };

    if (viewport.width > minWidth && !$("#cre-ratesBox section").attr("data-equalizer")) {
        $("#cre-ratesBox section").attr("data-equalizer", "cre");
        $("#rateBox").attr("data-equalizer-watch", "cre");
        $("#cre-from").attr("data-equalizer-watch", "cre");
    } else if (viewport.width < minWidth && $("#cre-ratesBox section").attr("data-equalizer")) {
        $("#cre-ratesBox section").removeAttr("data-equalizer", "cre").height('auto');
        $("#rateBox").removeAttr("data-equalizer-watch", "cre").height('auto');
        $("#cre-from").removeAttr("data-equalizer-watch", "cre").height('auto');
    }
    $(document).foundation('equalizer', 'reflow');
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：