[解決済み] CSSの@mediaルールをインラインで配置することは可能ですか？

質問

HTML5アプリにバナー画像を動的に読み込ませる必要があり、画面幅に合わせて2種類のバージョンを用意したいです。携帯電話の画面幅を正しく判断できないので、divの背景画像を追加して、@mediaで画面幅を判断して正しい画像を表示させる方法しか思いつきません。

例えば

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

このようなことは可能でしょうか？また、どなたか他にご意見をお持ちの方はいらっしゃいますか？

解決方法は？

@media at-ruleとメディアクエリは、インラインスタイル属性に存在することができません。 property: value の宣言があります。として 仕様 が置いている。

style属性の値は、CSSのコンテンツの構文と一致する必要があります。 宣言ブロック

特定のメディアにおいて特定の要素にのみスタイルを適用する唯一の方法は、スタイルシートの別のルール（外部リンクであろうと <style> 要素)、つまり、そのためのセレクタを考える必要があります。つまり、そのためのセレクタを用意する必要があります。 ブラウザの開発ツールで または、この要素を分離するクラスとIDの組み合わせを考えてください。

#myelement { background-image: url(particular_ad.png); }

@media (max-width: 300px) {
    #myelement { background-image: url(particular_ad_small.png); }
}

ページの性質上、この要素だけに確実にマッチするセレクタを見つけることができない場合、特異性を気にする必要がなければ、カスタムプロパティを使用することができます。 またはInternet Explorer :

:root { --particular-ad: url(particular_ad.png); }

@media (max-width: 300px) {
    :root { --particular-ad: url(particular_ad_small.png); }
}

<span style="background-image: var(--particular-ad);"></span>