javascript - CSSは、特定の幅の要素にのみ適用されるルールを定義する唯一の方法ですか?

Question

現在、javascript を使用してサイズ変更イベントをリッスンし、レイアウトの幅に応じて css クラスをレイアウトに適用しています。

eg: <800px --> <div class="layout" />
    >800px --> <div class="layout wide" />

これは機能しますが、ぎこちなく感じます。

要素が特定の幅/サイズである場合にのみ適用されるルールを定義するCSSのみの方法があるかどうか疑問に思っていますか?

Answer 1

これがメディア クエリの目的ですが、個々の要素ではなくビューポート全体に適用されます。だからあなたはこれを持っているかもしれません:

.layout {
    /* styles for wide layout */
}
@media all and (max-width:800px) {
    .layout {
        /* styles for narrow layout */
    }
}