今天看前辈的代码时，发现img标签有个陌生的srcset属性，如下：

1 <img class="Avatar" src="https://pic3.zhimg.com/8622a8eea_s.jpg" srcset="https://pic3.zhimg.com/8622a8eea_xs.jpg 2x" alt="测试用户1">

　　翻阅得知此属性用于：以最合适的src去匹配不同屏幕（高分屏低分屏如Retina；大屏小屏）。使用如下：

<img src="source.jpg" srcset="source_2x.jpg 2x, source_3x.jpg 3x">

　　

<img src="source.jpg" width="100%"

  srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">

　　 2x、3x 表示目标屏幕的像素密度；400w、600w表示目标浏览器的宽度的限度，如浏览器宽度550w时，匹配600w的src。

通过

window.devicePixelRatio
来获取像素比

img标签-srcset属性的更多相关文章

  1. image的srcset属性

    介绍 响应式页面中经常用到根据屏幕密度设置不同的图片.这个时候肯定会用到image标签的srcset属性.srcset属性用于设置不同屏幕密度下,image自动加载不同的图片.用法如下: <im ...

  2. HTML5的Video标签的属性,方法和事件汇总

    <video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...

  3. php 内置支持的标签和属性

    内置支持的标签和属性列表如下: 标签名 作用 包含属性 include 包含外部模板文件(闭合) file import 导入资源文件(闭合 包括js css load别名) file,href,ty ...

  4. video标签的属性和方法总结

    最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...

  5. HTML video 视频标签全属性详解

    HTML 5 video 视频标签全属性详解   现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.C ...

  6. HTML5探索一（那些新增的标签和属性）

    tml5相比html4,添加了部分语义化的标签和属性,现在我们就从这些标签和属性开始,学习html5吧. 首先,认识下HTML5新的文档类型: <!DOCTYPE html> 那些新标签 ...

  7. 关于html标签和属性的基本理解

    一.关于标签和属性的基本理解: html页面的内容主要由"元素"或"标签"组成.使用标签来描述网页的内容. 标签tag一般都是成对出现,开始标签和结束标签,或者 ...

  8. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  9. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

随机推荐

  1. Kettle转换或作业乱码

    结果这样做还是乱码,其实这和

  2. linux 中的进程wait（）和waitpid函数，僵尸进程详解，以及利用这两个函数解决进程同步问题

    转载自:http://blog.sina.com.cn/s/blog_7776b9d3010144f9.html 在UNIX 系统中,一个进程结束了,但是他的父进程没有等待(调用wait / wait ...

  3. 测试markdown编辑器

    标题1 标题2 +++ 第一件事 +++ 第二件事 +++ 第三件事 |head|头|头栏| |body|body|body|

  4. ubuntu 12.10 默认安装php5-fpm无监听9000端口，nginx无法链接php5-fpm修正

    升级php5的时候,发现nginx无法链接到php5,怀疑是php5端口的问题. netstat -an未发现监听9000端口. 查看/var/log/php5-fpm.log一切正常. 随后查看/e ...

  5. div 背景自适应

    .bg { background: url(images/title_bg.jpg); filter: "progid:DXImageTransform.Microsoft.AlphaIma ...

  6. iOS边练边学--xib文件初使用

    一.Xib和storyboard对比 *共同点: 1>都用来描述软件界面 2>都用Interface Builder工具来编辑 3>本质都是转换成代码去创建控件 *不同点 1> ...

  7. Springboot 之 Hibernate自动建表（Mysql）

    Springboot 之 Hibernate自动建表(Mysql) 2016年10月21日 10:39:44 阅读数:8180 本文章来自[知识林] 引入Maven依赖包 <dependency ...

  8. JQuery _ 定时器(jQuery Timers) 学习

    jQuery Timers插件地址: http://plugins.jquery.com/project/timers JQuery Timers应用知识 提供了三个函式 1. everyTime(时 ...

  9. Linux远程连接Windows桌面

    Ubuntu对初始用户的界面友好是有目共睹的:Fedora一向以创新.傲慢的姿态示人.其实,对于两者,我虽然更倾向于选择Fedora,但不可避免地会两者比较,发现Ubuntu更加人性化,这点是经过很多 ...

  10. console.log()注意事项。

    console.log常因不明原因在IE9出现SCRIPT5009: 'console' is undefined (console未被定义) 错误! IE9说console变量未定义? 但F12打开 ...