响应式图片

之前因为响应式的问题和客户还有过矛盾，今天正好把响应式学一学

picture

这个是新的标签，兼容性方面不怎么样，所以需要用到插件Picturefill2.0

具体用法我也试了一下

<script type="text/javascript">
document.createElement("picture")
</script>
<script async src="picturefill.min.js" type="text/javascript" charset="utf-8"></script>
<picture>
<source srcset="images/Img02.JPG" media="(max-width:500px)" />
<img srcset="images/img1.jpg"/>
</picture>

实践证明可以使用，也很简单效果也很明显

             iPhone6　　　　　　　　　　　　iPad

 刚加进去不能用我还在奇怪原因，原来不加viewport的时候连js都判断不了屏幕的宽度

 

转载于:https://www.cnblogs.com/myzsy/p/6143861.html