img的srcset属性的作用

1. img标签的srcset可以用来处理页面在不同像素密度终端设备上对图片的选择性展示
2. sizes作用就在于告诉浏览器根据【屏幕尺寸]和【像素密度】的计算值从srcset中选择最佳的图片源。

< img src="density-x1.jpg" 
          srcset="density-x1.jpg 1x>

<img src="../static/images/128.png" srcset="../static/images/128.png 350w" sizes="(max-width: 320px) 100px, 1024px">

srcset 中的 w 单位，可以理解成图片质量

 sizes="(max-width: 320px) 100px, 1024px"

浏览器唯一知道的就是视口高度，不知道图片的真实尺寸

首先浏览器会读取 sizes 然后根据媒体情况来选择，如果匹配到某个值，就根据这个值的长度值单位乘以屏幕像素密度，最终得出来的值再与srcset 中的宽度描述匹配来选择图片。