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

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

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标签则是默认加载的图片。

 

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