web-dev-qa-db-ja.com

メディアクエリのインラインスタイルを使用する

ばかげているように聞こえますが、CSSメディアクエリをインラインスタイルで使用できますか？その理由は、PHP）で背景をエコーし​​ているためです。デバイスが網膜の場合は、網膜サイズの画像を使用する必要があります。

ie: <div style="background:url(normal.png); <- need to add style for retina device

htmlcssmedia-queries
17
JackMahoney

私が知る限り、インラインスタイルの宣言内ではありません。

ただし、PHPおよびreally内からエコーしている場合は、スタイルシートにアクセスできないので、メディアクエリを使用してインライン<style />要素をエコーすることをお勧めします。 divのクラスを使用します。

つまり

<style type="text/css">
    .bg {
        background: url(background.jpg);
    }
    @media only screen and (max-device-width: 480px) { /* Change to whatever media query you require */
        .bg {
             background: url(background_highres.jpg);
        }
    }

</style>
<div class="bg">...</div>
20
Marko