今天看前辈的代码时，发现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. 找你妹+ipad+wifi，回顾那年的经典游戏

    昨天,不是从前天同事拿平板给我后,就没睡过一个安稳觉. 先是看电视看得爽歪了,再就是昨天晚上的游戏之夜.IPAD比較老.连系统都不好更新了.就用了留存的应用. 打开酷我看看有什么音乐推荐,听到一首&l ...

  2. VBA 删除页

    怎么让word自动删除第3.6.9.12等3的倍数页‘ Sub kk1206190933() Dim wNum As Integer Dim wPag As Integer With Selectio ...

  3. 【Unity】UGUI的Text各种小问题

    Text:用中文输入法时,无法输入汉字.输入了拼音后,按回车键无反应.目前的办法是在别的地方打好字后复制过来. Font:字体必须选一个,选None则文字变成一串黑色方块. Font Size:文字大 ...

  4. POI生成EXCEL，公式不自动执行的有关问题

    POI生成EXCEL,公式不自动执行的问题 场景:POI读取Excel模板. 当使用POI操作Excel时,发现由POI生成的公式能够在打开Excel是被执行, 而事先手工写入Excel模板文件的公式 ...

  5. 使用DroneKit控制无人机

    DroneKit-Python是一个用于控制无人机的Python库.DroneKit提供了用于控制无人机的API,其代码独立于飞控,单独运行在机载电脑(Companion Computer)或其他设备 ...

  6. div绝对定位针对手机浏览器的区别

    最近在对ipad和安卓平板做测试,发现我自己写的一个下拉控件在安卓浏览器里面被遮盖了,但是PC或者ipad都没有这个现象,一开始以为是z-index 可是无论我调多少都没有用,研究了好久,发现是代码的 ...

  7. ftp 长传报错553 可能是选的目录不对

    ftp> put /root/20180711tmp.txt /cc.txt local: /root/20180711tmp.txt remote: /cc.txt 200 PORT comm ...

  8. redis4安装

    第一步官网下载 https://redis.io/ rz 上传或者直接wget   http://download.redis.io/releases/redis-4.0.2.tar.gz 2.将其下 ...

  9. 【转】@JoinColumn 详解

    在address中没有特殊的注解. 在Person中对应到数据库里面就有一个指向Address的外键. 我们也可以增加注释指定外键的列的名字,如下:@OneToOne(cascade=CascadeT ...

  10. 第三百一十四节，Django框架，自定义分页

    第三百一十四节,Django框架,自定义分页 自定义分页模块 #!/usr/bin/env python #coding:utf-8 from django.utils.safestring impo ...