スマホとPCサイズで、画像の表示切り替えをしたいのですが、うまくいきません、、。
６４０px以下・・・sp.jpg
それ以外・・・pc.jpg
上記の条件で切り替えたいのですが、chromeの検証を見る限り変わっていないようです。
<picture class="section_01">
<source media="(min-width:６４０px)" srcset="pc.jpg">
<img src="sp.jpg">
</picture>
.section_01 {
display: block;
width: 100%;
height: auto;
@media screen and (min-width:640px) {
& img{
width: 100%;
height: auto;
}
}
}
HTMLとCSSのコードが正しいかどうか、どなたかご回答いただけないでしょうか。
どうぞよろしくお願い致します。
(min-width:６４０px)
こちら全角文字が含まれていますが
これは影響ないですか？
@x0x5x1x7x
Questioner
普通に以下の書き方じゃダメなのでしょうか？
<picture>
<source media="(max-width: 640px)" srcset="sp.jpg">
<source media="(min-width: 641px)" srcset="pc.jpg">
<img src="pc.jpg">
</picture>
調べた感じ、
画像切替のみの用途でsrcsetとMedia Queryを
併用するようなパターンは無さそうでしたが…
使用しているディスプレイの種類によって
開発者ツールの設定が必要かもしれないです。
■参考
@x0x5x1x7x
Questioner
既に解決されてたら申し訳ないのですが
min-widthは以上という意味なので
min-width:641pxにすると640pxを境に切り替わってくれます。
質問の意図が違うのでしたらすみません
@x0x5x1x7x
Questioner
上記の回答以外であれば、これでどうでしょうか？
<picture class="section_01">
<img src="pc.jpg" id="pc">
<img src="sp.jpg" id="sp">
</picture>
@media screen and (min-width:640px) {
#sp {
display: none;
}
}
@media screen and (max-width:640px) {
#pc {
display: none;
}
}
@x0x5x1x7x
Questioner