javascript - メディアクエリを使用してクラスまたはその他の属性を追加する

Question

私は現在、CSS メディアクエリを使用して、次のような小/中画面デバイスをターゲットにしています。

@media screen and (min-device-width: 480px) {
  ...
}
@media screen and (min-device-width: 720px) {
  ...
}

これは期待どおりに機能し、特定のセレクターにスタイルを適用することはできますが、メディアクエリに基づいてセレクターにクラスまたはその他の属性を追加する方法があるかどうか疑問に思っていました。

私の考えの例：

@media screen and (min-device-width: 480px) {
  body { addClass('body-iphone') }
}

CSSまたはJavaScriptでそれを行う方法はありますか?

score 9 · Accepted Answer

Enquire.jsを確認してください。メディアクエリを処理するための軽量で純粋な JavaScript ライブラリ。かなりかっこよく見えます。

score 7 · Accepted Answer

プレーンCSSではできません。

LESS または SASS を見てください。これらは、CSS をより動的かつ柔軟に操作できるように設計されています。

それらを使用したら。それらなしでは生きられません。

特定の解像度で既存のクラスセレクターを本文に追加する場合。

.some-style { background-color:red; }

@media screen and (min-device-width: 480px) {
    body {
        @extend .some-style;
    }
}

score 1 · Accepted Answer

conditionizrを見てくださいこれはあなたが探しているものかもしれませんhttp://conditionizr.com/

javascript - メディア クエリを使用してクラスまたはその他の属性を追加する