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 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小的更多相关文章

  1. 如何使用 HTML5 的picture元素处理响应式图片

    来自: http://www.w3cplus.com/html5/quick-tip-how-to-use-html5-picture-for-responsive-images.html 图片在响应 ...

  2. 另外一款超棒的响应式布局jQuery插件 – Freetile.js

    在线演示 我们曾经介绍过俩款知名的响应式布局插:isotope和masonary,今天我们这里再介绍一款相当不错的响应式布局插件 – Freetile.js,使用它同样可以生成超酷的动态布局效果.相信 ...

  3. Crumpet – 使用很简单的响应式前端开发框架

    Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁.内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码.快 ...

  4. S Gallery – 很有特色的响应式 jQuery 相册插件

    S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...

  5. 使用bootstrap响应式布局——手机屏幕中横向滚动显示标签页选项

    导航栏到小屏幕的时候,我们的处理办法是隐藏为一个按钮.可是选项卡的标签页部分,我们的处理办法是加一个水平滚动条.但是加水平滚动条需要解决一个问题,就是宽度的问题,如果不设置宽度,他就会根据屏幕大小自适 ...

  6. 超棒的响应式设计测试书签和工具(bookmarks)(转)

    一.测试书签(bookmarks) Viewport Resizer 这个书签号称拥有158个国家3万多活跃的用户,主要特性: 完全自定制 方便的添加自定义尺寸 手动的横竖屏切换 自动的横竖屏切换 ( ...

  7. 【20190305】CSS-响应式图片:srcset+sizes,picture,svg

    响应式图片可以根据不同的设备屏幕大小从而选择加载不同的图片,从而节省带宽.实现响应式图片有三种方法:srcset+sizes属性.picture标签.svg 1. srcset+sizes srcse ...

  8. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  9. 很实用的baguetteBox.js 图片弹出层

    lightbox JS插件--baguetteBox.js,它是用纯Javascript创建的图像展示效果,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. baguetteB ...

随机推荐

  1. 宿主机跟Vmware中的linux使用host-only,bridge 方式通信

    声明:我的机器在本文中叫 宿机,vmware中的linux就叫linux 本文已经实现了通过host-only模式 宿机 ping通 linux,但是在host-only模式下,linux 没有pin ...

  2. 【转】android中TextAppearanceSpan的使用

    android中TextAppearanceSpan的使用 Posted on April 17, 2011 在android中如何想word中一样对文字进行丰富的风格设置呢? TextAppeara ...

  3. 枚举for/in

    for/in循环可以遍历对象中所有可以枚举的属性(包括自有属性和继承属性).对象继承的内置方法不能枚举,凡是在代码中给对象自己或者继承的类添加的属性方法都是可枚举的,但是对象自有的内置属性可不可以枚举 ...

  4. Windows上memcached的使用

    Memcached是什么?Memcached是由Danga Interactive开发的,高性能的,分布式的内存对象缓存系统,用于在动态应用中减少数据库负载,提升访问速度. Memcached能缓存什 ...

  5. Installutil.exe的位置和路径

    安装程序工具使您得以通过在执行指定程序集中的安装程序组件来安装和卸载服务器资源.此工具与 System.Configuration.Install命名空间中的类一起工作.安转的位置和路径在:C:\WI ...

  6. Linq无聊练习系列6--Any/All/Contains/Concat/Union/Intersect/Except/take/skip/SqlMethods操作练习

    /*********************Any/All/Contains/Concat/Union/Intersect/Except/take/skip/SqlMethods操作练习******* ...

  7. ASP.NET MVC实现剪切板功能

    前言 关于复制粘贴的功能,好像不用劳师动众的写后端代码,JS就可以,但正如大家所知道的,兼容性问题,当然这么通用的功能怎么可能没有一个通用的方案呢,于是便找到了一款jquery插件 jquery.cl ...

  8. C++拷贝构造函数总结

    C++拷贝构造函数总结 目录: 拷贝构造函数的基础知识 拷贝构造函数的使用 拷贝构造函数的行为 1.拷贝构造函数的基础知识 拷贝构造函数(copy constructor)是构造函数,是拷贝已经存在的 ...

  9. [转]Native Java Bytecode Debugging without Source Code

    link from:http://www.crowdstrike.com/blog/native-java-bytecode-debugging-without-source-code/index.h ...

  10. 【编程范式】C语言1

    最近在网易公开课上看斯坦福大学的<编程范式>,外国人讲课思路就是清晰,上了几节课,感觉难度确实比我们普通大学大很多,但是却很有趣,让人能边学边想. 范式编程,交换两个数,利用 void * ...