css - jsなしで小さすぎる場合は要素を非表示にします

Question

ウィンドウのサイズが最小サイズを下回った場合、コンテンツを非表示にするのが好きです。例 (http://css-tricks.com/dynamic-page-replaceing-content/) を見つけましたが、なぜそれが機能するのかわかりませんでした。

<div class="container">
    <div class="box left">foo1</div>
    <aside class="box right">foo2</aside>
</div>

目標は、コンテナの幅が指定された最小サイズを下回った場合、脇に隠されることです。css を使用するだけで、javascript がなくても動作するはずです。

score 8 · Accepted Answer

あなたが探しているのは「CSS Media Queries」です。

この例は、CSS だけで探しているものを実現します。

@media only screen and (max-device-width: 480px) {
  aside { 
    display:none;
  }
}

1 に答える 1