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

效果如下

大屏幕

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

中等屏幕

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

小屏幕

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

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

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

上一篇:List集合就这么简单【源码剖析】


下一篇:系统架构的定义(与系统)-architecture