picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

Posted 2020-08-22

polyfill 它是一个能够补齐浏览器兼容性问题的一个东西，使用到的<picture></picture>标签 ，并不是所有浏览器都支持，为了实现更好的兼容效果，这里就使用到了这个东西 ，它能在浏览器不支持的时候提供一些替代的方式 ，对于响应式图片，有名的picturefill库能实现兼容性强的‘响应式’图片，对于不支持picture的浏览器，它会用js获取srcset后面的设置，然后决定输出什么样的图片

使用方法

引入js文件（可从cdnjs.com下载）

<script src="js/vendor/picturefill.min.js"></script>

再来看下用picture属性写的引入图片的方式

<picture>
       <source srcset="img/ad001-l.png" media="(min-width:50em)">
       <source srcset="img/ad001-m.png" media="(min-width:30em)">
       <img src="img/ad001.png" alt="2015年度报告">
</picture>

上面一段代码的意思就是

　　　800px 以上（正常屏幕和大屏幕）使用大图 ad001-1.png,

　　　481px - 800px (中等屏幕) 使用中等图片ad001-m.png,

　　　小于等于480px(小屏幕)的时候就使用默认的图片 ad001.png

效果如下

大屏幕

中等屏幕

小屏幕

picture里可以有很多个source，媒体查询定义了在何种屏幕大小下加载，srcset里则是对应加载的地址(50em = 50*16 =800px);

最后面一句的img标签则是默认加载的图片。