デバイスサイズで画像の入れ替えをする。Jsを使わずに

レスポンシブデザインに対応させる為、デバイス毎に表示する画像を変えたい事もあるでしょう。JavaScriptを使用した方法もありますが、HTMLだけの方法をご紹介します。場合によってはCSSで多少の調整は必要になりますが、画像の入れ替え自体はHTMLだけです。

Picture

メディアクエリをそのまま書けます。

<picture>
  <source media="(max-width: 575.98px)" srcset="img/sp.png"> <!--以下なら-->
  <source media="(max-width: 767.98px)" srcset="img/tb.png"> <!--以下なら-->
  <img src="img/pc.png">　<!--それ以外なら-->
</picture>

575.98px以下ならsp.png / 767.98px以下ならtb.png / それ以外ならpc.png

あわせて読みたい

[CSS] @media メディアクエリ まとめ レスポンシブ対応のサイト制作で不可欠なのがメディアクエリ（@media）の記述です。私自身、曖昧なまま使っていた所があり、すんなり思い通りにならない、コンパクトに…