質問: **最終的に知りたいこと** ・下記要件を満たす内容で、画面幅に応じて出力画像を変更するにはどのような方法があるでしょうか? **要件** ・「IE11」もしくは「Edge」にも対応 ・画像は背景画像としてではなく「img src」で複数指定 ・「PC」と「スマホ」でファイルを分けない --- **<検討した内容>** **srcset属性** ・IE未対応なので断念 **メディアクエリ** ・背景画像ではなく「img src」を画面幅に応じて変更する方法はあるでしょうか? **現時点の案** ・window.matchMediaで条件分岐をすれば良いかなと思ったのですが、そこからどうすれば良いでしょうか? ・createElement('img')後、DOMへ追加する感じでしょうか? ・ちょっと大袈裟な気もするのですが、何か良い方法はないでしょうか?
回答: メディアクエリの条件指定で 画面幅が以上、以下のCSSを設定すれば画像やHTMLの表示構造を切り替えられます。必要でない要素は display: none; で非表示にすれば良いです。 また、JavaScriptで、以上のとき以下のときの 動作切り替えが必要になるかもしれません。 ``` 例 ```