1

私は zurb-foundation-5.on レスポンシブ イコライザーのトピックを初めて使用します。

イコライザーをアクティブにするメディア クエリを指定できます。親コンテナーに data-equalizer-mq 属性を適用します。属性の値を、Foundation で使用しているのと同じメディア クエリに設定します。不明なメディア クエリを使用すると、Equalizer はメディア クエリ リクエストを無視します。これは、equalize_on_stack を true に設定した場合に特に役立ちます。

彼らが何を言っているのかはっきりとはわかりませんでした。誰でもデモの例で簡単に説明できます。

ありがとうございました、

4

2 に答える 2

1

基本的に、画面サイズに基づいてページ上の要素の高さを均等にすることができます。私の回答は、Foundationのメディア クエリがどのように機能するかを読んで理解していることを前提としています。

モバイル デバイスのみで要素の行の高さを均等にしたいとします。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) に到達すると、イコライズがアクティブになり、各パネルの高さが同じになります (イコライズ)。

ご参考までに、上記の反対を示す2 番目の例を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 に答える