响应式图片新属性srcset、sizes及、、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)

结果描述及总结：

    以上结果可以看出，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-width:800px) and (min-width: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-width:500px) 300px,(max-width:1000px) 500px,10vw"/> 

分析：

(max-width:500px) 300px(可视区宽度小于500px时，图片宽度为300px)

(min-width: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-width:1000px) 500px,(max-width:500px) 300px,10vw"/>

分析：交换两个条件的顺序，取可视区宽度为400px、600px

结果：0-1000px都图片宽度都是500px，第二个条件失效。

测试总结

sizes的赋值语法，条件出现的先后顺序很关键，前面的条件不会被后面的条件所覆盖。以上面的两个测试为例：第一次测试，max-width:500px出现在max-width:1000px的前面，所以两个条件重复的部分没有被1000px的条件覆盖；第二次测试，max-width:1000px出现在max-width: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-width: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-width:500px"
	   srcset="100-s1.jpg 100w,300-s1.jpg 300w"
	   sizes="(max-width:300px) 80px,240px" />
	 
   <img src="selina.jpg" alt="alt"
	srcset="600-s2.jpg 600w,800-s2.jpg 800w"
	sizes="(max-width: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-width:500px) 80px,240px"/>
	 
   <img src="selina.jpg" alt="alt"
	   srcset="100-s1.jpg 600w,300-s1.jpg 800w"
	   sizes="(max-width:500px) 80px,240px"/>
</picture>

结果：选择尺寸400px、600px

结果描述及总结：

可见，<picture>+<source>+type进行的可替换格式测试成功的。

全篇总结：

• 浏览器加载图片原则：大于等于实际尺寸的图片集合中，选择最接近的那一张图片
• 复合条件定义分解成单一的max-/min-并严格按照顺序规则定义书写
• sizes真正未定义的范围，浏览器会默认图片尺寸为100vw
• 用<picture>+<source>可以提供图片可替换格式，但目前结合media对图片进行“艺术指导”

转载请注明：https://blog.csdn.net/u014711690/article/details/79750505