如何使用 data-equalizer-mq 属性

Question

我是 zurb-foundation 的新手-5.on 他们说的响应式均衡器主题

You can specify media queries for which equalizer should activate on. Apply the data-equalizer-mq attribute to the parent container. Set the value of the attribute to the same media queries you are use to using in Foundation. If you use an unknown media query, Equalizer will ignore the media query request. This is particularly useful if you have set equalize_on_stack to true.

我没听清楚他们说的是什么。任何人都可以用演示示例简要说明。

谢谢，

Answer 1

基本上，它允许您根据屏幕尺寸均衡页面上元素的高度。我的回答假设您已经阅读并理解 Foundations media queries 的工作原理。

假设您只想在移动设备上均衡一行元素的高度。您可以通过将 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>

正如您在 codepen 中看到的那样，每个面板的高度在大屏幕上是不同的，因为每个面板中的内容长度不同。但是，当您将浏览器屏幕拖入并到达小断点（640px）时，均衡将激活并且每个面板的高度将变得相同（均衡）。

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

希望对您有所帮助。

Answer 2

添加到托马斯你也可以有多个相互嵌套的均衡器，你必须给它们命名才能工作

<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>

如何使用 data-equalizer-mq 属性

how to use data-equalizer-mq attribute

equalizer

zurb-foundation-5