响应式图片查询理解
下面是一个响应式的图片代码示例：
<figure class="">
<picture>
<source media="(max-resolution: 1.5dppx)" sizes="600px" srcset="https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/0._Blog_header.gif 600w">
<source media="(min-resolution: 1.5dppx)" sizes="1200px" srcset="https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/0._Blog_header.gif 1200w">
<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/0._Blog_header.gif" alt="0. Blog header.gif" sizes=" 600px, 1200px" srcset="https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/0._Blog_header.gif 600w, https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/0._Blog_header.gif 1200w" data-target="image">
</picture>
</figure>
以及下面这个示例：
<figure class="">
<picture>
<source media="(max-resolution: 1.5dppx)" sizes="600px" srcset="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/2_OvrxnDr.max-600x600.png 600w">
<source media="(min-resolution: 1.5dppx)" sizes="1200px" srcset="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/2_OvrxnDr.max-1200x1200.png 1200w">
<img src="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/2_OvrxnDr.max-1200x1200.png" alt="2.png" sizes=" 600px, 1200px" srcset="https://storage.googleapis.com/gweb-uniblog-publish-prod/images/2_OvrxnDr.max-600x600.png 600w, https://storage.googleapis.com/gweb-uniblog-publish-prod/images/2_OvrxnDr.max-1200x1200.png 1200w" data-target="image">
</picture>
</figure>
首先我们说明以下 figure html 标签：
👇 MDN Web Doc 关于 figure 的解释：
HTML <figure> 元素代表一段独立的内容, 经常与说明（caption） <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。
下面是一个示例：
<figure>
<img src="/media/cc0-images/elephant-660-480.jpg"
alt="Elephant at sunset">
<figcaption>An elephant at sunset</figcaption>
</figure>
关于 picture 标签解释：
👇 MDN Web Doc 关于 picture 标签的解释：
HTML <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的URL。然后，所选图像呈现在<img>元素占据的空间中。
下面是一个示例：
<picture>
<source srcset="/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)">
<img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>
如果屏幕大于 800px 则显示 surfer-240-200.jpg 图片，否则显示下面一个图片，同时有些浏览器由于兼容性问题，无法解析 picture 标签，则也会显示 painted-hand-298-332.jpg 图片。
关于上面的理解：
<source media="(max-resolution: 1.5dppx)" sizes="600px" srcset="https://storage.googleapis.com/gweb-uniblog-publish-prod/original_images/0._Blog_header.gif 600w">
首先图片会查询屏幕分辨率，最大分辨率 1.5dppx，关于 max-resolution 的解释可以参考下面参考资料。
size 是一个源大小列表，描述了源所代表的图像的最终渲染宽度。每个源大小都包含一个以逗号分隔的媒体条件长度对列表。浏览器使用此信息在布局页面之前确定srcset要使用哪个图像。仅当元素是元素的直接子元素时，该属性才有效。
也就是上面非视网膜屏幕显示0._Blog_header.gif 图片。
同时关于最后 w 的解释如下：
用户代理将根据指定的描述符和属性w中指定的渲染大小计算每个图像的有效像素密度。sizes然后，它可以根据用户屏幕的像素密度、缩放级别以及可能的其他因素（例如用户的网络条件）选择任何给定资源。如果用户的屏幕是 320 CSS 像素宽，这相当于指定wolf-400.jpg 1.25x, wolf-800.jpg 2.5x, wolf-1600.jpg 5x. 另一方面，如果用户的屏幕是 1200 CSS 像素宽，这相当于指定wolf-400.jpg 0.33x, wolf-800.jpg 0.67x, wolf-1600.jpg 1.33x. 通过使用w描述符和sizes 属性，无论用户设备有多大，用户代理都可以选择正确的图像源进行下载。
由于文章最开始有些浏览器可能无法很好解析这些标签，最后 img 作为兜底，根据不同的视口宽度加载不同的图像。
关于 dppx 的解释：
表示每个 px 的点数。 由于 CSS px 的固定比率为 1:96，因此1dppx相当于 96dpi。
可能我的理解也存在一定误差，后面理解深入之后继续完善这篇文章。
参考资料：
1、MDN Web Doc - figure 可附标题内容元素
2、MDN Web Docs - ：picture 元素
3、MDN Web Docs - image-resolution
4、MDN Web Ddocs - resolution
5、Explain `w` in `srcset` of image
黄兵个人呢博客原创。
转载请注明出处：黄兵个人博客 - 响应式图片查询理解
评论列表