了解srcset和size的数学 [英] Understanding the maths of srcset and sizes
问题描述
今天早上，当我试图了解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. /p>
否则，如果您使用的是视网膜屏幕，则在确定要选择的图像时也会考虑屏幕的DPR.
最后，挑选算法背后的数学原理是特定于浏览器的(即，它不是规范的一部分)，因此，作为开发人员，您不应依赖它.它可能会在浏览器之间，浏览器版本之间以及根据用户的条件和偏好进行更改.
I forked and ammended a simple codepen this morning while I've been trying to understand the srcset and sizes markup and the maths behind how the image gets selected at certain break points. Here is the pen: http://codepen.io/patrickwc/pen/Ijuwq
Copied here:
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%;
}
}
It makes sense to me up until the 62.5em breakpoint. This is 1000px. Considering I have specified in the sizes attribute, that at (min-width: 62.5em) 25vw the picture should take up a quarter of the screen size, why is the 600 x 600 the first to load? 1000 / 4 = 250, so the 320 picture would do fine. I've read up on picturefill a lot and read some great posts by Eric Portis and Chris Coyier on the subject. I don't understand what I'm doing wrong, or if its just a weird bug?
Your sizes value should start off at the narrowest breakpoint, and gradually move to the wider ones, so in your case it should be (min-width: 62.5em) 25vw, (min-width: 30em) 50vw, 100vw.
Otherwise, if you're on a retina screen, the screen's DPR is also taken into account when figuring out which image to pick.
Lastly, the math behind the picking algorithm is browser specific (i.e. it is not part of the spec), so it is not something you should rely on as a developer. It may change between browsers, between browser versions, and based on the user's conditions and preferences.
这篇关于了解srcset和size的数学的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
