html - 了解srcset和size的数学

今天早上，当我试图理解srcset和size标记以及在某些断点处如何选择图像的背后的数学运算时，我分叉并修改了一个简单的codepen。这是笔：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断点对我来说都是有意义的。这是1000像素。考虑到我已在sizes属性中指定，在(min-width: 62.5em) 25vw处图片应占屏幕尺寸的四分之一，为什么600 x 600最早加载？ 1000/4 = 250，因此320张图片效果很好。我已经阅读了很多关于picturefill的文章，并阅读了Eric Portis和Chris Coyier的一些很棒的帖子。我不明白自己在做什么错，还是只是一个奇怪的错误？

最佳答案

您的sizes值应从最窄的断点开始，然后逐渐移至更宽的断点，因此在您的情况下，应为(min-width: 62.5em) 25vw, (min-width: 30em) 50vw, 100vw。

否则，如果您使用的是视网膜屏幕，则在确定要选择的图像时也会考虑屏幕的DPR。

最后，挑选算法背后的数学原理是特定于浏览器的（即，它不是规范的一部分），因此，作为开发人员，您不应依赖它。它可能会在浏览器之间，浏览器版本之间以及根据用户的条件和偏好进行更改。

关于html - 了解srcset和size的数学，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26800048/