PCとスマホで画像を切り替えて表示したい場合の処理について備忘のために記録。
index.html
<imgclass="pc"src="../img/hoge.png"alt="PC用の画像"><imgclass="sp"src="../img/fuga.png"alt="スマホ用の画像">style.css
.pc{display:block!important;}.sp{display:none!important;}@mediaonlyscreenand(max-width:500px){.pc{display:none!important;}.sp{display:block!important;}}HTMLにはPC用、スマホ用両方とも記載する。
CSSで調整を行う。
PCで見た際には、class名がpcのimgのみが表示され、
スマホで見た際には、、class名がspのimgのみが表示される
ようにすることで、切り替えて表示することができる。
