1.写在前面
测试时间：2018/3/28
测试工具及方法： Firefox developer edition-mozila浏览器的responsive design mode
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-300px) 150px,(max-500px) 350px, (max-750px) 650px,(max-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)
结果描述及总结：
以上结果可以看出，img的width为150px时，加载的为等比缩小的300px的图片；img的width为350px时，加载的为等比缩小的600px的图片；img的width为650px时，加载的等比缩小的800px的图片；img的width为850px时，加载的为等比放大的800px的图片。
结论：浏览器按照sizes的规则得到尺寸后，选择性加载图片时是按照“图片尺寸不小于实际尺寸”的原则进行的。也就是说，选择图片是在资源列表里的“大于等于实际尺寸的图片集合中，选择最接近的那一张图片”。当然，如果没有完全相同的尺寸的图片存在时，是有等比例缩放的。
B.第二次
<img src="selina.jpg" alt="alt" srcset="600-s2.jpg 600w,800-s2.jpg 800w" sizes="(max-800px) and (min-500px) 800px,10vw"/>结果：
选择width：400px、600px、1000px
对应width范围：0-500px、500-800px、800px以上
对应img的width：40px、60px、100px
结论：
用and连接min-width和max-width在当前版本(60.07b)的火狐开发者浏览器是不支持的，会被无效化。
其他情况，如or连接min-和max- 或者 and/or 连接相同的max-/min-都是不支持的，语义上也没有必要。
那么，我们怎么处理复杂的media-condition情况呢？
小测试1：逗号连接的<media-conditon>,<media-condition> <source-size-value>,<source-size-value>工作原理到底是怎么样的？(个人理解)
<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-500px) 300px,(max-1000px) 500px,10vw"/>
分析：
(max-500px) 300px(可视区宽度小于500px时，图片宽度为300px)
(min-1000px) 500px(可视区域宽度小于1000px时，图片宽度为500px)
结果：(可视宽度取400px、600px)
<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-1000px) 500px,(max-500px) 300px,10vw"/>分析：交换两个条件的顺序，取可视区宽度为400px、600px
结果：0-1000px都图片宽度都是500px，第二个条件失效。
测试总结
sizes的赋值语法，条件出现的先后顺序很关键，前面的条件不会被后面的条件所覆盖。以上面的两个测试为例：第一次测试，max-500px出现在max-1000px的前面，所以两个条件重复的部分没有被1000px的条件覆盖；第二次测试，max-1000px出现在max-500px的前面，500px的条件无法覆盖与前面1000px条件重复的部分，也就是它自己的全部范围，所以失效了。
由上面的总结，我们得到了复杂条件的sizes赋值的解决办法：统一用max-或者min-构成赋值语句
- 统一用max-构成(条件范围定义必须严格按照从小到大的顺序出现)
- 统一用min-构成(条件范围定义必须严格按照从大到小的顺序出现)
- 其余复杂的范围构成，都可以分解成多个单一的max-/min-条件
C.第三次
<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-500px) 250px" />结果：
选择的width：300px、501px、601px、1000px
对应范围：0-500px、500px以上
img的width：250px、未知
结果描述及总结：
width在0-500px时，img的width为250px，浏览器正确选择了300px尺寸的图片；而当500px以后，属于未定义的范围，(500px,600px]范围，浏览器选择600px的图片；(600,800px]范围,l浏览器选择800px图片；800px以上，仍旧是800px图片。
总结：可见，未定义的范围，浏览器对图片的尺寸的设置默认是100vw。即：可见区域的全部尺寸。
(3)<picture>+<source>+meida+srcset+sizes测试(艺术指导测试)
<picture> <source media="max-500px" srcset="100-s1.jpg 100w,300-s1.jpg 300w" sizes="(max-300px) 80px,240px" /> <img src="selina.jpg" alt="alt" srcset="600-s2.jpg 600w,800-s2.jpg 800w" sizes="(max-1000px) 480px,640px"/> </picture>结果：
选择的width：290px、400px、800px、1200px
对应width范围：0-300px、300-500px、500-1000px、1000px以上
img的width：80px、240px、480px、640px
结果描述及总结：
全是s2的图片。<source>标签失效，但<img>以及其中的srcset、sizes仍旧有效。
(4)<pictue>+type+srcset+sizes可替换格式测试
测试图片：100-s1.jpg、300-s1.jpg以及用这两个制作的同尺寸的ico图片100-s1.ico、300-s1.ico
(在线制作地点：在线ico制作站点)
<picture> <source type="image/x-icon" srcset="100-s1.ico 100w,300-s1.ico 300w" sizes="(max-500px) 80px,240px"/> <img src="selina.jpg" alt="alt" srcset="100-s1.jpg 600w,300-s1.jpg 800w" sizes="(max-500px) 80px,240px"/> </picture>结果：选择尺寸400px、600px
结果描述及总结：
可见，<picture>+<source>+type进行的可替换格式测试成功的。
全篇总结：
- 浏览器加载图片原则：大于等于实际尺寸的图片集合中，选择最接近的那一张图片
- 复合条件定义分解成单一的max-/min-并严格按照顺序规则定义书写
- sizes真正未定义的范围，浏览器会默认图片尺寸为100vw
- 用<picture>+<source>可以提供图片可替换格式，但目前结合media对图片进行“艺术指导”
转载请注明：https://blog.csdn.net/u014711690/article/details/79750505