瞭解下Foundation 均衡器(Equalizer)

導讀	Foundation 用於開發響應式的 HTML, CSS and JavaScript 框架。

我們可以在容器元素新增 data-equalizer 屬性，併為每個子元素新增 data-equalizer-watch 屬性來建立一個相同高度的均衡器。最高的元素決定了其他元素的高度。

注意: 滑塊需要使用 JavaScript。所以你需要初始化 Foundation JS:
例項

<div class="row" data-equalizer>
  <div class="medium-4 columns panel" data-equalizer-watch>
    Lorem ipsum...
  </div>
  <div class="medium-4 columns panel" data-equalizer-watch>
    Sed ut...
  </div>
  <div class="medium-4 columns panel" data-equalizer-watch>
    Lorem ipsum...
  </div>
</div>
<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

在均衡器上透過新增 data-equalizer-mq="value" 屬性為不同螢幕尺寸設定相同高度。值可以是以下之一：

值	描述
medium-up	預設。 建立相同高度的容器，寬度大於 40.063em
large-up	建立相同高度的容器，寬度大於 64.063em
xlarge-up	建立相同高度的容器，寬度大於 90.063em
xxlarge-up	建立相同高度的容器，寬度大於 120.063em

為 data-equalizer 和 data-equalizer-watch 屬性新增相同的值。 這會一起連線到均衡器容器。 重複多次巢狀均衡器，確保他們是匹配的：

例項

<div class="row" data-equalizer="first">
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
      <h3>Panel</h3>
      <!-- An Equalized Container Inside The Equalized Container -->
      <div class="row" data-equalizer="second">
        <div class="panel" data-equalizer-watch="second">
          <h3>Nested Panel</h3>
          <p>Lorem ipsum...</p>
        </div>
        <div class="panel" data-equalizer-watch="second">
          <h3>Nested Panel</h3>
          <p>Lorem ipsum...</p>
        </div>
        <div class="panel" data-equalizer-watch="second">
          <h3>Nested Panel</h3>
          <p>Lorem ipsum...</p>
        </div>
      </div>
      <!-- End Nested Equalized Container -->
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
      <h3>Panel</h3>
      <p>Ut enim...</p>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="panel" data-equalizer-watch="first">
      <h3>Panel</h3>
      <p>Lorem ipsum....</p>
    </div>
  </div>
</div>

原文來自：