9

srcsetデバイスのピクセル密度の調整とアートディレクションの両方に使用することに関する多くの記事を読みました。

Paddi Macdonnell による 2015 年のレスポンシブ画像の現状

srcset パート 2: Rich Finelli による W 記述子とサイズ属性

これらのどちらも、 w-descriptors を属性なしで使用できるかどうかsizesを明確にしません。ほとんどは反対を示しま​​す (w-descriptor は と一緒に機能しますsizes)

私自身の初歩的なテストでは、 w 記述子のみを使用して画像の切り替えが機能することが確認されています。

w-descriptor を使用して幅に応じて多数の異なる画像を指定すると、ブラウザーは限られたスペースに収まる最適な画像を選択することがわかりました。

他のコードは必要ありません。

レスポンシブ サイトを設計する場合、これは明らかに混乱を招きます。なぜなら、私はデザイナーとして次のケースしか必要としないからです。

  1. device-pixel-density に基づいて画像を変更します (私にとってはうまくいきます。すばらしい!)
  2. 利用可能な幅に基づいて画像（アートディレクション）を変更します（私にとってはうまくいきます。素晴らしいです！）

この大失敗にどのように影響するのか疑問に思っていますsizes。これが新しい機能であることを心から感謝します。

4

2 に答える 2

3

-descriptorssizesを使用する場合、属性は違いを生み、必須です。w次の例を見てください。

<img srcset="
    https://via.placeholder.com/200x150?text=200w&v=1 200w,
    https://via.placeholder.com/400x300?text=400w&v=1 400w,
    https://via.placeholder.com/800x600?text=800w&v=1 800w,
    https://via.placeholder.com/1200x900?text=1200w&v=1 1200w
" style="width: 200px">

<img srcset="
    https://via.placeholder.com/200x150?text=200w&v=2 200w,
    https://via.placeholder.com/400x300?text=400w&v=2 400w,
    https://via.placeholder.com/800x600?text=800w&v=2 800w,
    https://via.placeholder.com/1200x900?text=1200w&v=2 1200w
" style="width: 200px" sizes="200px">

同じ画像が 2 つ表示されていsrcsetますが、そのうちの 1 つは正しいsizes属性を持っています。正しい画像をロードするものとsizesロードしないものがあります。これは、sizes属性が省略された場合、ブラウザがデフォルト値を使用するためです100vw。

device-pixel-density のみに基づいて画像を変更するには、x代わりに -descriptors を使用します。

要素を使用<picture>したアートディレクション用。<source>

于 2016-02-14T11:49:41.467 に答える