今天看前辈的代码时，发现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. scala实现彩票算法

    scala实现彩票算法 (1)具体实现代码如下: package hw1 import scala.util.control._ /** * @author BIGDATA */ object Cp ...

  2. java多线程有几种实现方法？线程之间如何同步

    java中多线程的实现方法有两种:1.直接继承thread类:2.实现runnable接口: 同步的实现方法有五种:1.同步方法:2.同步代码块:3.使用特殊域变量(volatile)实现线程同步:4 ...

  3. 如何在Windows系统上面安装redis

    一.Redis简介 Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(s ...

  4. 开源图形数据库Neo4j使用 php开发

    先看看它的示例数据 打开 Neo4j Browser :play movie graph 写代码,然后点play执行 Cypher, the graph query language.Neo4j提供了 ...

  5. 浅谈 JavaScript 编程语言的编码规范

    对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编 ...

  6. 应当将指针变量用“==”或“！=”与 NULL 比较

    应当将指针变量用“==”或“!=”与 NULL 比较. 指针变量的零值是“空”(记为 NULL). 尽管 NULL 的值与 0 相同,但是两者意义不 同. 假设指针变量的名字为 p,它与零值比较的标准 ...

  7. Adobe AIR（跨平台应用）

    Adobe AIR(跨平台应用)现在正式应用于android平台了,Adobe Air是一款独立的客户端应用软件,这些软件可以作为单独的程序安装使用,它可以使开发人员使用HTML.JavaScript ...

  8. linux -- ubuntu 何为软件源

    新手学Ubuntu的时候,一般不知道什么是源,但源又是Ubuntu下常用到的东西.因此,本文就详细介绍一下Ubuntu 源. 什么是软件源? 源,在Ubuntu下,它相当于软件库,需要什么软件,只要记 ...

  9. linux -- 修改文件

    vi编辑器有三种模式:命令模式,编辑模式,末行模式 打开vi后首先是命令模式,用i,o,a等进入编辑模式, 按esc退出编辑模式,回到命令模式. 在命令模式下输入:wq表示保存退出,:wq!强制保存退 ...

  10. R语言低级绘图函数-symbols

    严格意义上将symbols 并不能算是一个低级的绘图函数,因为它不仅可以在一幅已经存在的图标上添加元素,还可以创建一张新的图表 鉴于它绘图时的灵活性,我把它归入到低级绘图函数中 symbols 可以创 ...