响应式图片新属性srcset、sizes及<picture>、<source>、media的有效性测试

1.写在前面

测试时间：2018/3/28

测试工具及方法： Firefox developer edition-mozila浏览器的responsive design mode

2.涉及的知识点

CSS媒体查询-MDN

响应式图片— srcset 和 sizes 属性

响应式图片

英文资料1

英文资料2

3.测试项目及结果总结

(1)测试用图片(100px、300px、600px、800px)

(2)srcset+sizes响应式测试

A.第一次

<img src="selina.jpg" alt="alt"
     srcset="100-s1.jpg 100w,300-s1.jpg 300w,600-s2.jpg 600w,800-s2.jpg 800w"
     sizes="(max-width:300px) 150px,(max-width:500px) 350px,
	    (max-width:750px) 650px,(max-width:1000px) 850px,10vw" /> 

结果:

(选择width：290px、400px、700px、900px、1200px、1800px；

对应的尺寸范围：0-300px，300-500px，500-750px，750-1000px，1000px以上；

对应img的width：150px、350px、650px、850px、120px)