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断点为止，这对我来说是有意义的。这是 1000 像素。考虑到我已经在sizes属性中指定，at(min-width: 62.5em) 25vw图片应该占屏幕大小的四分之一，为什么600 x 600最先加载？1000 / 4 = 250，所以 320 的图片就可以了。我已经阅读了很多关于图片填充的内容，并阅读了 Eric Portis 和 Chris Coyier 关于这个主题的一些很棒的帖子。我不明白我做错了什么，或者它只是一个奇怪的错误？

4

1 回答 1

2

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

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

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

于 2014-11-07T12:08:14.940 回答