1.ライブラリを読み込む 


<script src="src/ResizeSensor.js"></script>
<script src="src/ElementQueries.js"></script>

GitHubからダウンロードしたJSを読みこませるだけ。

例1のデモ

The quick brown fox jumps over the lazy dog. 

    <div class="widget-1">
      The quick brown fox jumps over the lazy dog.
    </div>

.widget-1の幅に応じて見た目が変化する

例2のデモ


    <div class="widget-2">
      <img src="img/profile.jpg" alt="">
      <img src="img/profile.jpg" alt="">
    </div>

.widget-2の幅に応じて、子要素の見た目が変化する

デモ

幅が変わると2カラムになる

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

デモ

高さに応じて見た目を変える

The quick brown fox jumps over the lazy dog.

デモ

要素の幅や高さが変更したことを検知する

#sampleの幅 : ??
#sampleの高さ : ??
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

期待通りに動かないデモ

あとから追加された要素には、適用されない。

期待通りに動くデモ

あとから追加された要素にも、適用されるようにした。