我今天早上分叉并推荐了一个简单的编码器,同时我一直在努力了解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。考虑到我在sizes
属性中指定,在(min-width: 62.5em) 25vw
处图片占据屏幕尺寸的四分之一,为什么600 x 600是第一个加载? 1000/4 = 250,所以320画面会很好。我已经阅读了很多关于picturefill的内容,并阅读了Eric Portis和Chris Coyier关于这个主题的一些精彩帖子。我不明白我做错了什么,或者它只是一个奇怪的错误?
答案 0 :(得分:2)
您的sizes
值应该从最窄的断点处开始,然后逐渐转移到更宽的断点,因此在您的情况下,它应该是(min-width: 62.5em) 25vw, (min-width: 30em) 50vw, 100vw
。
否则,如果您在视网膜屏幕上,在确定要选择哪个图像时也会考虑屏幕的DPR。
最后,拣货算法背后的数学是浏览器特定的(即它不是规范的一部分),所以它不是你作为开发人员应该依赖的东西。它可能会在浏览器之间,浏览器版本之间以及用户的条件和偏好之间发生变化。