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

Question

我是zurb的新手-基金会-5.关于响应均衡器的话题，他们说

您可以指定应该为哪个均衡器启用的媒体查询。将数据均衡器-mq属性应用于父容器。将属性值设置为在基础中使用的相同媒体查询。如果使用未知媒体查询，均衡器将忽略媒体查询请求。如果您已经将equalize_on_stack设置为true，则这尤其有用。

我不明白他们说了什么。任何人都可以用示例简单地解释。

谢谢,

Answer 1

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

假设您只想在移动设备上均衡化一行元素的高度。可以通过将small-only基金会媒体查询添加到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>

从码页中可以看到，每个面板的高度在大屏幕上是不同的，因为每个面板中的内容都有不同的长度。然而，当你拖动你的浏览器屏幕，它到达小的只有断点(640 it )，均衡将激活，每个面板的高度将成为相同的(均衡)。

作为参考，我在码页中包含了第二个示例，它说明了上述情况的相反之处。

希望这能有所帮助。

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>