1

今朝、srcset とサイズのマークアップ、および特定のブレーク ポイントで画像がどのように選択されるかの背後にある数学を理解しようとしている間に、単純なコードペンをフォークして修正しました。これがペンです：http://codepen.io/patrickwc/pen/Ijuwq

ここにコピー：

html:

  <div class="container">

    <div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div><!-- 

   --><div class="container__item">
      <img
        src="http://placehold.it/320x320"
        srcset="http://placehold.it/1536x1536 1536w,
        http://placehold.it/1024x1024 1024w,
        http://placehold.it/900x900  900w,
        http://placehold.it/600x600  600w,
        http://placehold.it/320x320  320w"
        sizes="(min-width: 30em) 50vw, (min-width: 62.5em) 25vw, 100vw"  
        alt="Testing, testing">
    </div>

  </div>

CSS:

  *, *:before, *:after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  .container {
    margin: 0;
    padding: 0;
    background: red;
    list-style: none;
  }

      .container__item {
        display: inline-block;
        vertical-align: top;
        margin: 0;
        padding: 0;
        width: 100%;
      }


  @media (min-width: 30em) {
    .container__item {
      width: 50%;
    }
  }

  @media (min-width: 62.5em) {
    .container__item {
      width: 25%;
    }
  }

62.5emブレークポイントまでは理にかなっています。これは1000pxです。画像が画面サイズの 4 分の 1 を占めるようsizesに属性で指定したことを考えると、600 x 600 が最初に読み込まれるのはなぜですか? (min-width: 62.5em) 25vw1000 / 4 = 250 なので、320 度の画像で問題ありません。私は、picturefill についてよく読み、Eric Portis と Chris Coyier によるこのテーマに関するすばらしい記事を読みました。何が間違っているのかわかりませんか、それとも単なる奇妙なバグですか?

4

1 に答える 1

2

値sizesは最も狭いブレークポイントから開始し、徐々に広いブレークポイントに移動する必要があるため、この場合は(min-width: 62.5em) 25vw, (min-width: 30em) 50vw, 100vw.

それ以外の場合、Retina スクリーンを使用している場合は、選択する画像を決定する際にスクリーンの DPR も考慮されます。

最後に、ピッキング アルゴリズムの背後にある計算はブラウザー固有のもの (つまり、仕様の一部ではない) であるため、開発者として信頼すべきものではありません。ブラウザ間、ブラウザのバージョン間、およびユーザーの条件と好みに基づいて変更される場合があります。

于 2014-11-07T12:08:14.940 に答える