35015


**最終的に知りたいこと**  
・下記要件を満たす内容で、画面幅に応じて出力画像を変更するにはどのような方法があるでしょうか？

**要件**  
・「IE11」もしくは「Edge」にも対応  
・画像は背景画像としてではなく「img src」で複数指定  
・「PC」と「スマホ」でファイルを分けない

* * *

**＜検討した内容＞**

**srcset属性**  
・[IE未対応](http://caniuse.com/#search=srcset)なので断念

**メディアクエリ**  
・背景画像ではなく「img src」を画面幅に応じて変更する方法はあるでしょうか？

**現時点の案**  
・window.matchMediaで条件分岐をすれば良いかなと思ったのですが、そこからどうすれば良いでしょうか？  
・createElement('img')後、DOMへ追加する感じでしょうか？  
・ちょっと大袈裟な気もするのですが、何か良い方法はないでしょうか？


CC BY-SA 3.0
2017-05-25T12:13:00.140
35011
2017-05-25T15:59:24.397
7886
question
html
レスポンシブサイトで、画面幅に応じて出力画像を変更したい(大きさが異なる画像を読み込みたい)


メディアクエリの条件指定で 画面幅が以上、以下のCSSを設定すれば画像やHTMLの表示構造を切り替えられます。必要でない要素は display: none;
で非表示にすれば良いです。

また、JavaScriptで、以上のとき以下のときの 動作切り替えが必要になるかもしれません。

[code]

    例
    <style>
    /*以上のとき*/
    @media (min-width: 700px){
    .max {
    display: block;
    }
    .mini {
    display: none;
    }
    }
    
    /*以下のとき*/
    @media (max-width: 700px) {
    .max {
    display: none;
    }
    .mini {
    display: block;
    }
    }
    </style>
    
[/code]


CC BY-SA 3.0
2017-05-25T15:05:59.917
35015
2017-05-25T15:59:24.397
2017-05-25T15:59:24.397
22793
22793
35011
answer