メディアクエリ以外のレスポンシブ対応指定方法！
今までPC版、スマホ版の画像の切り替えは、以下のように
メディアクエリを使用して行なっていました。
<!-- HTML -->
<img class="pcImg u-pcOnly" src="...">
<img class="spImg u-spOnly" src="...">
/*CSS*/
.u-spOnly {
display: none; /*こっちはPC版では表示しない*/
}
@media all and (max-width:768px) {
.u-pcOnly {
display: none; /*こっちはスマホ版では表示しない*/
}
.u-spOnly {
display: block;
}
}
ユーティリティクラスにして、タグに付けはずしするイメージです。
しかし、他にも方法があることを今日学びました！
①解像度ごとの表示切り替えなど
<img sizes="(min-width: 960px) 75vw, 100vw" srcset="img-1440.png 1440w, img-720.png 720w, img-360.png 360w" src="default-image.png">
sizes属性、srcset属性の使用方法です。
こちらで注意が必要なのは、HTML5.1から追加された機能なので、一部非対応のブラウザがあるということです。
secset属性
使用される画像の選択候補を設定する。
画像ファイルの横幅（w）もしくはデバイスピクセル（x）のどちらかを指定することができる。
sizes属性
画像の表示サイズ（横）を指定できる。初期値100vw。
メディアクエリでブレイクポイントを設けることができる。割合では%でなくvwを使用する。
注意！
secset="small.png 768w,large.jpg 1280w"
sizes="50vw"
で、ビューポートが1280wのとき、何が表示されるでしょうか、、？
→sizesがビューポートの５０％(=640w)なので、smallが表示されます。
②pictureタグでの表示切り替え
<picture>
<source media="(min-width: 960px)" srcset="img-pc.jpg">
<img src="img-sp.jpg">
</picture>
pictureタグの使用です。
上の例だと、スマホ（幅960pxまでの時）にはソースタグの画像が、
pc（幅960以上の時）には下の画像が表示されます。
こちらもHTML5.1で新しく加わった要素なので、対応ブラウザには注意しないといけないです。
うまく指定して、レスポンシブ対応を目指します！