web-dev-qa-db-ja.com

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

私は現在、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でそれを行う方法はありますか？

javascriptiphonecssmedia-queries
12
Alex K

チェックアウト Enquire.js 。メディアクエリを処理するための軽量で純粋なJavaScriptライブラリ。かなりクールに見えます。

9
user2168565

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

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

あなたがそれらを使用したら。それらなしでは生きていけません。

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

SASS

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

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

JavaScriptソリューション

if (window.matchMedia("(min-device-width: 480px)").matches {
    // modify dom
}
2
Synesso

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

1
iConnor

これも役立ちます Modernizr --svgが有効になっているか、他の機能が有効になっている場合でも検出できます。

http://modernizr.com/

0
Павел Иванов