标签：用户 了解 列表 仿真 宽度 缩放 并且 review 解析
什么是响应式图像呢，你可以这样理解，在不同设备，有着良好的显示效果，图像可以根据不同设备去变化，就可以理解为“响应式图像
废话不多说，直接开始吧，下面给大家们介绍了2个方法
1.JavaScript 和 CSS 都可以实现
2.Picturefill.js 来实现
这2个道理都是一样的，标签引入了srcset 和sizes的这个属性
Picturefill发展是赞助细丝集团和Bocoup，并通过保持Picturefill队。正在进行的项目讨论是通过Slack进行的。
斜体样式版本3是Picturefill代码库的完全重写，具有优化的性能，更好的本机行为仿真，以及更加贴近规范的解析器。它还处理许多与第一代本机实现相关的怪癖，缺点和边缘情况。
PICTUREFILL 3.0.2版（稳定版 )
picturefill.js（开发版，未经授权的代码）
picturefill.min.js（生产版，缩小代码）
github
原网站
要开始使用Picturefill，请下载上面列出的文件之一，并head使用以下代码从HTML文档的部分引用它：
<script src="picturefill.js"></script>
为了更有效地加载页面，我们建议您async也为该script标记添加属性。这告诉浏览器它可以异步加载图片填充，而无需在加载文档的其余部分之前等待它完成。如果添加此属性，则需要在script标记之前添加一行脚本，以允许旧版浏览器识别picture元素，如果它们在picturefill加载完成之前在页面中遇到它们。
使用方法：
<head> <script> // Picture element HTML5 shiv document.createElement( "picture" ); </script> <script src="picturefill.js" async></script> </head>
一旦你包含picturefill.js，你就可以开始向你的网站添加响应式图像元素了！Picturefill增加了对整套响应式图像解决方案的支持，包括picture元素和新img元素属性。
响应式图像规范的某些功能组合解决了许多不同的用例 -这些是一些最常见的用例：
使用
srcset属性srcset属性（无sizes）被用来服务于较大但其他方面相同的图像源以仅仅高分辨率显示器。
1 <img srcset="examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x" alt="…">
如果安装了固有维度插件：2x源将自动缩小2 - 这样图像将占用布局中与图像相同的空间1x，但2x源将以像素密度的两倍显示。这仅适用于通过CSS调整图像的自然大小，img或者width内容属性将按预期运行。
使用
srcset和sizes属性
这些srcset和sizes语法用于为浏览器提供一个图像源列表，这些图像源的大小相同（相同的宽高比，相同的焦点）以及它们将如何显示，然后允许浏览器选择最适合的源用户的当前视口大小，显示密度以及页面布局中该图像的大小
<img sizes="(min-width: 40em) 80vw, 100vw" srcset="examples/images/medium.jpg 375w, examples/images/large.jpg 480w, examples/images/extralarge.jpg 768w" alt="…">
该sizes语法用于定义你的形象会在你的布局占据的空间。srcset然后定义图像列表及其固有宽度。这允许浏览器为布局的该部分中可用的大小选择最小的适当源，而不仅仅是视口大小。
使用
picture元素picture当您需要显式控制在设置视口大小时显示哪个源时，将使用该元素。
该picture元素需要比上面的示例更多的标记，但它允许您使用CSS3 Media Queries等功能将图像源与不同大小，缩放级别和宽高比配对，以及设计中的布局条件。但是，它不应该用于服务于完全不同的图像源 - 所有的源都必须用alt内部的属性来描述img。
1 <picture> 2 <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)"> 3 <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)"> 4 <img srcset="examples/images/art-medium.jpg" alt="…"> 5 </picture>
您的picture元素应包含一系列source元素，后跟img元素。每个source元素必须具有一个srcset属性，指定一个或多个图像URL源（如果需要可以使用扩展的srcset语法进行分辨率切换），该img元素应具有srcset属性以用于回退目的（某些浏览器，如Android 2.3的赢取’看到source元素）。此外，您可以添加media包含CSS3媒体查询的sizes属性和/或要配对的属性srcset。
第一个source具有media与用户上下文匹配的属性将决定img结尾处元素的src ，因此您在使用min-width媒体查询时会首先显示更大的选项（如下面的示例所示），并且在使用max-width媒体时会持续使用更大的选项查询。由于这些图像源是为了与布局断点对齐，srcset的缓存行为，并为潜在的带宽或用户偏好覆盖不适用于此。
为了解决兼容问题，ie9一下的老版本
1 <picture> 2 <!--[if IE 9]><video style="display: none;"><![endif]--> 3 <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)"> 4 <source srcset="examples/images/large.jpg" media="(min-width: 800px)"> 5 <!--[if IE 9]></video><![endif]--> 6 <img srcset="examples/images/medium.jpg" alt="…"> 7 </picture>
MEDIA和SRCSET语法
1x/ 2x可使用语法内source元件srcset作为用于更复杂的分辨率的媒体的查询的速记属性。
1 <picture> 2 <source srcset="examples/images/large.jpg, examples/images/extralarge.jpg 2x" media="(min-width: 800px)"> 3 <img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="…"> 4 </picture>
picture中的type属性
该types属性仅用于向支持该格式的浏览器发送备用图像源格式，而不向浏览器发送备用源。与现有解决方案不同，该picture元素使用单个请求进行这些协商。
Picturefill支持SVG和WebP作为其核心的一部分，但可以通过“typesupport”插件使用以下MIME类型：
1 <picture> 2 <source srcset="examples/images/large.webp" type="image/webp"> 3 <img srcset="examples/images/large.jpg" alt="…"> 4 </picture>
Picturefill.js公开了一个全局函数：picturefill()函数。picturefill()在页面加载时自动调用一次或多次，并且在调整浏览器窗口大小时（或在方向更改时）也会触发它。您也可以picturefill()随时在JavaScript中运行该函数，这在对DOM进行更新或与您的应用程序相关的条件发生变化时可能很有用：
picturefill();
还有一个大家可以看一下一峰大神写的，比我写的详细多了
阮一峰的网络日志
标签：用户 了解 列表 仿真 宽度 缩放 并且 review 解析
原文地址：https://www.cnblogs.com/fangsiyixia/p/11383697.html
