☰

CSS @media ルールをインラインで配置することは可能ですか? 質問する

tag-icon • tag-icon html css media-queries
CSS @media ルールをインラインで配置することは可能ですか? 質問する

バナー画像を HTML5 アプリに動的に読み込む必要があり、画面の幅に合わせていくつかの異なるバージョンを用意したいと考えています。携帯電話の画面の幅を正しく判断できないため、これを行うには、div の背景画像を追加し、@media を使用して画面の幅を判断し、正しい画像を表示することしか考えられません。

例えば：

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

これは可能ですか、それとも他に何か提案はありますか?

ベストアンサー1

@media@ルールとメディアクエリはproperty: value宣言のみを含むことができるため、インラインスタイル属性には存在できません。スペックそれはこう述べています。

スタイル属性の値はCSSの内容の構文と一致している必要があります。宣言ブロック

特定のメディアの特定の要素にのみスタイルを適用する唯一の方法は、スタイルシートに別のルール（外部リンクまたは要素内部リンク<style>）を設定することです。つまり、セレクターを用意する必要があります。ブラウザの開発ツールを使用するまたは、この要素を分離するクラスと ID の組み合わせを見つけます。

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

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

ページの性質上、この要素のみに確実に一致するセレクターが見つからない場合は、詳細度を気にする必要がなければ、カスタムプロパティを使用できます。またはインターネットエクスプローラー:

: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>

おすすめ記事