问题
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?
回答1:
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.
来源:https://stackoverflow.com/questions/26800048/understanding-the-maths-of-srcset-and-sizes