如何使用数据均衡器mq属性

Question

我是zurb-foundation-5的新手。关于响应均衡器主题，他们说

您可以指定均衡器应激活的媒体查询。将数据均衡器mq属性应用于父容器。设置用于相同媒体查询的属性值在Foundation中使用。如果使用未知媒体查询，均衡器将忽略媒体查询请求。如果您已将equalize_on_stack设置为true

我不明白他们说了什么。任何人都可以用演示示例进行简要解释。

谢谢你，

Answer 1

基本上，它允许您根据屏幕大小均衡页面上元素的高度。我的回答假设您已经阅读并理解了Foundations媒体查询的工作原理。

假设您只想在移动设备上均衡一行元素的高度。您可以通过将small-only Foundation媒体查询添加到data-equalizer-mq属性来实现这一点，如：data-equalizer-mq="small-only"。你的HTML看起来像这样：

<!-- Example 1: Equalize height on small screens only. -->
<div class="row" data-equalizer data-equalizer-mq="small-only">
  <div class="small-4 columns">
    <div class="panel" data-equalizer-watch>
      <h1>First panel</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div class="small-4 columns">
    <div class="panel" data-equalizer-watch>
      <h1>Second panel</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
  <div class="small-4 columns">
    <div class="panel" data-equalizer-watch>
      <h1>Third panel</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

从代码笔中可以看到，在大屏幕上，每个面板的高度都不同，因为每个面板中的内容长度不同。然而，当你拖动浏览器屏幕并到达小断点(640px(时，均衡器将激活，每个面板的高度将变得相同(均衡器(。

为了供您参考，我在代码笔中包含了第二个示例，它说明了与上述相反的情况。

希望能有所帮助。

Answer 2

添加到Thomas你也可以有多个均衡器，它们嵌套在一起，你必须给它们起名字，它们才能工作

<div class="row" data-equalizer="foo">
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="foo">
    <h3>Parent panel</h3>
    <div class="row" data-equalizer="bar">
      <div class="panel" data-equalizer-watch="bar">
        ...
      </div>
      <div class="panel" data-equalizer-watch="bar">
        ...
      </div>
      <div class="panel" data-equalizer-watch="bar">
        ...
      </div>
    </div>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="callout panel" data-equalizer-watch="foo">
      ...
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="foo">
      ...
    </div>
  </div>
</div>