レスポンシブ / 「size属性にブレークポイント設定 × vw指定」の複数組み合わせ表示確認は、嫌になるぐらい分かりづらい

レスポンシブレスポンシブ画像

8日

 状態:検討中  閲覧数:1,965  投稿日:2015-08-14  更新日:2015-08-14
動作確認するたけで8日も要した
・本当に全然分からないため、困り果てた


実際に遭遇したコード


このエントリーで言及している対象内容の具体例

ケース1.
<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
			<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="幅に合わせた寸法での表示の例">


結論 / 「size属性にブレークポイント設定 × vw指定」の複数組み合わせ表示確認は、1件1件個別に確認していく方が無難

 閲覧数:601 投稿日:2015-08-14 更新日:2015-08-14

一気に確認しようとすると


不具合が生じる可能性がある
・以下のルールに抵触する場合、期待した表示を確認することが出来ない


表示確認する際、重要な意味を持つ仕様


sizes属性では、メディアクエリが当てはまる最初の条件が適用される
・後に記述した条件は、常に最初の条件に当てはまらない場合にしか適用されない
・リロードしても結果は変わらない。読込当初と同じ結果しか取得できない

キャッシュなの?
・根本的に考え方が異なる
・仮にキャッシュを無効にしても、読み込む度に、メディアクエリが当てはまる最初のsizes属性条件は常に適用される

不具合が生じる(可能性がある)ケース

 閲覧数:579 投稿日:2015-08-14 更新日:2015-08-14

複数の条件提示、もしくは、複数の結果表示を、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="幅に合わせた寸法での表示の例">


疑念 / 「size属性にブレークポイント設定 × vw指定」の複数組み合わせは、リサイズ未対応?

 閲覧数:593 投稿日:2015-08-14 更新日:2015-08-14

リサイズ未対応?


現象だけから推測するに
・「size属性にブレークポイント設定 × vw指定」の複数組み合わせは、リサイズ未対応だと思われる

より正確には?
・「小さいサイズ」から「大きいサイズ」への変化には対応するが、逆は不可だと思われる

そうでなければ?
・整合性が取れない
・私の頭の中で…


画面幅に応じて取得ディレクトリパスを変更したい

レスポンシブ画像系用語



類似度ページランキング
順位 ページタイトル抜粋
1 レスポンシブ / 「size属性にブレークポイント設定 × vw指定」の複数組み合わせ表示確認は、嫌になるぐらい分かりづらい 82
2 レスポンシブスマホサイトで、意図せず横スクロールが発生する場合は、URLを折り返し表示するよう設定 36
3 一つの要素に対して「id 属性値」を複数指定することは出来ない 34
4 Braveインストールしてみたけれども、全ての広告を必ず非表示に出来るわけではないみたい 34
5 要素。width と height 属性を指定しなかった場合、(内容のいかんに関わらず)幅 300 ピクセル、高さ 150 ピクセルで表示される 32
6 Dreamweaver8で、デフォルトのワークスペースレイアウトを指定するやり方 → 結局、分からず 32
7 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない 32
8 「Webページへのリンク」をクリックした際、Chrome起動オプションを適用させるには、レジストリを書き換えるしかない 31
9 モバイル フレンドリー テスト / viewport設定 31
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 30
11 resizeが効かない場合は、min-heightを設定してみる 30
12 Firefox7 「このサイトのパスワードを保存しますか?」を非表示にする(案) 29
13 「z-index」が効かない時は「-1」を指定してみる 29
14 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない 29
15 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる 29
16 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 29
17 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 28
18 レスポンシブWebサイトにおけるブレイクポイント 28
19 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 28
20 「position:absolute;」が分からなくなったときに見るエントリー 28
2024/10/12 9:03 更新
週間人気ページランキング / 10-5 → 10-11
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 48
2 RGB ⇔ Lab | 色変換(色) 12
3 Design 0 9
4 16進数カラーコード / 2進数 8
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
6 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 5
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 5
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 5
6 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 5
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 4
7 鉄道会社毎のカラーコード | カラーコード(色) 4
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
7 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 4
8 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
8 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
8 8ビットカラー / インデックスカラー / パレットカラー 3
8 「bgcolor」「background-color」「background」の違い | CSS 3
2024/10/12 1:01 更新