[解決済み] CSSの@mediaルールをインラインで配置することは可能ですか?
2022-03-15 01:39:49
質問
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>
関連
-
[解決済み] HTMLで複数選択を許さないリストボックスを作るには?
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] HTMLにPDFを埋め込むおすすめの方法とは?
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] BootstrapのCollapse Navbarが動作しない
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] bootstrapでボタンにリンクを貼るには?
-
[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするものですか?
-
[解決済み] slackのチームIDやチャンネルIDを調べる最も簡単な方法は何ですか?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] HTMLにPDFを埋め込むおすすめの方法とは?
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?
-
[解決済み] 入力フィールドに :before や :after 疑似要素を使用できますか?
-
[解決済み] CSSでdivを縦にスクロールできるようにする