1

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

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

我不明白他们说的清楚。任何人都可以通过演示示例进行简要说明。

谢谢你，

4

2 回答 2

1

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

假设您只想在移动设备上均衡一行元素的高度。您可以通过将small-onlyFoundation 媒体查询添加到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）时，均衡将激活，每个面板的高度将变得相同（均衡）。

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

希望有帮助。

于 2015-09-16T06:25:07.953 回答
1

要添加到 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>
于 2015-09-16T19:20:57.890 回答