カテゴリー:
レスポンシブ画像
閲覧数:712 配信日:2015-08-14 18:42
複数の条件提示、もしくは、複数の結果表示を、1ページでまとめて実施しようとする
不具合が生じる(可能性がある)
・面倒でも、1件1件個別にチェックした方が、結局は確認が早く終了する
ケース1.
500px未満
・100vwなのでまとめて確認を実施しても問題はない
500px以上600px未満
・100vwなので1/2px
・この時、500px未満を事前に実施していると、結果が作用するため正しい内容を表示できなくなる
・一度srcsetで選択した内容より以前の選択項目には戻れない(仕様詳細は不明)
コード
<img src="400.png"
sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
srcset="100.png 100w, 200.png 200w, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000.png 2000w">
ケース2.
640px未満
・100vwなのでまとめて確認を実施しても問題はない
640px以上1140px未満
・50vwなので1/2px
・この時、640px未満を事前に実施していると、結果が作用するため正しい内容を表示できなくなる
・一度srcsetで選択した内容より以前の選択項目には戻れない(仕様詳細は不明)
コード
<img
sizes="(min-width: 1140px) 570px, (min-width: 640px) 50vw, 100vw"
srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"
alt="幅に合わせた寸法での表示の例">