私は新しいレスポンシブ Web サイトのデザインに取り組んでおり、ブラウザーのビューポートが 768px 以上の場合、幅が 4 列に及ぶ画像のグリッドを含むギャラリーがあります (したがって、各画像はビューポートの約 25% です)。767px 以下のものは、幅が 1 列しかありません (解像度が低い場合は全幅になります)。
- デスクトップ サイズ (768 ピクセル以上) の画像は、幅 220 ピクセル (画像 4 列) にする必要があります。
- 480px から 767px の間は、最大 420px の幅 (1 列の画像) にする必要があります。
- また、モバイル サイズ (479 ピクセル未満) は幅 260 ピクセル (1 列の画像) までにする必要があります。
画像ごとに 3 つのソースがあります。220px、260px、420px。
上記からわかるように、サイズは、ビューポートが小さいほど画像が小さいという通常の規則に従っていないため、さまざまなオプションを調査して試しています.
提案に従って、私は Google Chrome をシークレット モードで使用しており、Internet Explorer のプライベート ブラウジングも行っています。ブラウザのビューポートは、ページをロードする前に小さく開始するなどして、行った変更が確実に更新されるようにしています。
私がたどり着いた現在のコードは、それを機能させるのに最も近いものであり、スタックオーバーフローに関する誰かのクエリ(私のものと同様)への回答に従っています。ただし、それを実装しようとすると、ブラウザに適切な画像をロードさせることができないようです。常に、より大きな 420px 幅の画像がロードされます。
私のコードは現在次のようになっています:
<img sizes="(min-width: 767px) 420px, 100vm"
srcset="images/thumbs/image_420.jpg 420w,
images/thumbs/image_260.jpg 260w,
images/thumbs/image_220.jpg 220w"
src="images/thumbs/image_220.jpg"
alt="example image"
/>
私が主題に取り組んでいる間の2番目のクエリ。私のシナリオでは、デフォルトの img src を 260px の画像に設定するのが最善でしょうか? これは、srcset が理解されず、中間サイズのビューポート (460-767px) のみが影響を受ける場合に、デスクトップ ブラウザーとモバイル ブラウザーの両方をカバーするためです。それとも、デフォルトの画像を最小サイズに設定するのが常に最善ですか?
任意の提案をいただければ幸いです、ありがとうございます。
- 編集 -
簡単な更新ですが、昨日論理的に理解したと思っていましたが、うまくいかなかったので、計算の概念全体をまだ理解しているかどうかわかりません。私の最新の編集は次のようになります。
<img sizes="(min-width: 460px) 420px, (min-width: 768px) 220px, 100vm"
srcset="images/thumbs/image_420.jpg 420w,
images/thumbs/image_260.jpg 260w,
images/thumbs/image_220.jpg 220w"
src="images/thumbs/image_260.jpg"
alt="example image"
/>
だから私の考えでは、私がリストしたサイズのセクションには状態があると思います...ビューポートが少なくとも460pxの場合は420pxの画像を使用し、ビューポートが少なくとも768pxの場合は260pxの画像を使用します。最後の 100vm は、それ以外の場合はビューポート幅全体で最適なものを使用することを意味します。何かが認識されなかった場合、これはほとんどのビューポート サイズに適合するため、デフォルト ファイルを 260px ファイルに修正しました。
ただし、上記の編集ではまだ 420px の画像のみが読み込まれます。
どんな提案でも大歓迎です。たとえそれが私の論理を修正するためだけであっても!