img srcset 和 sizes 诞生的目的是解决图片清晰度和节省加载图片大小问题,比方说我需要在retina高的硬件上看到更细腻的图片,又或者我要在电脑看到的图片和在手机上的图片不一样。
 
解决以上问题,我们可以使用css 中的@media 去实现,可是代码量超出了想象。有了这功能我们就能很好的处理需求,接下来我做个简单的解释,循序渐进的给大家说明。
 
1. 高 retina 
<img src="mdn-logo-sm.png"
alt="MDN"
srcset="mdn-logo-HD.png 2x, mdn-logo-VHD.png 3x ">

游览器会在加载图片前判断要使用那个图片依据设备的retina。

*注意:所有的图片宽度都是一样,但是质量会改变
 
2.不同设备宽度使用不同图片
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 400px">

先了解sizes属相,size就是尺寸的意思,图片属性先判断目前要用那个宽度来找srcset

以上的例子是说小于600会使用200px, 不然就下一个表达式(400px)
 
假设现在设备的宽是700px,那么sizes就等于400px,在srcset里寻找400 以上或等于的图片。
 
-----          
伙伴们一定有很多奇怪的想法,这里我就不一个一个的列出来了。
 
几项事物要注意,
-在使用sizes时,一定要使用srcset
-srcset 使用只能选着2x 或者 200w ,其中一个
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

img srcset 和 sizes的更多相关文章

  1. [CSS3] Image Width with sizes (srcset & sizes)

    What if the image won't be displayed at the full viewport width? Then you need something more than s ...

  2. Emmet语法大全手册

    这是基于官方手册整理制作的,因为那个手册网页打开很慢,所以就整理在这里了.以备不时之需. Syntax   Child: > nav>ul>li <nav> <ul ...

  3. emmet(Zen coding)帮助文档

    葵花宝典终可成,半途而废万事空. 官方地址:http://docs.emmet.io/cheat-sheet/ 我导出了pdf版,需要的同学可以下载: 链接:http://pan.baidu.com/ ...

  4. 近期Responsive web design项目经验分享-高分辨率图片处理篇

    在高分辨率的情况下  商品的图片难免会失真 怎样才能让商品的图片在高分辨率的情况下 效果不失真 提供用户更好的体验呢 我发现了一个解决方案 不知道是不是你想要的 先上图片对比下效果 左侧是使用后   ...

  5. CSS3基础(3)——CSS3 布局属性全接触

    一. 弹性盒模型 1.弹性盒子模型介绍 弹性盒模型(Flexible Box或Flexbox)是一个CSS3新增布局模块,官方称为CSS Flexible Box Layout Module,用于实现 ...

  6. HTML入门12

    开始了解响应式图片 响应式,根据屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片,接下来考虑怎样创建自适应得图片,专注于img元素,完成自适应. 分辨率切换,不同的尺寸 <img srcs ...

  7. 常用的css3新特性总结

    1:CSS3阴影 box-shadow的使用和技巧总结: 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscol ...

  8. 前端性能优化之优化图片 && 优化显示图片

    前端图片优化一直以来都是热门话题,从需求上来看,很多站点往往是图片体积大于代码体积, 图片请求多余代码文件请求, 给前端的性能带来了很大的困扰,那么应该如何解决呢? 零. 认识图片 我们通常使用的图片 ...

  9. emmet缩写大全

    Syntax   Child: > nav>ul>li <nav> <ul> <li></li> </ul> </n ...

随机推荐

  1. dedecms开启报错

    php.ini里面设置display_errors = On 开启错误提示,error_reporting = E_ALL & ~E_NOTICE 设置错误等级.也可以在php文件中ini_s ...

  2. ExtJs中XTemplate使用(转)

    转自http://www.studyofnet.com/news/408.html 本文导读:XTemplate是Ext.Template扩展的新类,它支持高级功能的模板类,如自动数组输出.条件判断. ...

  3. windows脚本的if语句

  4. How To View the HTML Source in Google Chrome

    Whether you are new to the web industry or a seasoned veteran, viewing the HTML source of different ...

  5. Java求解迷宫问题:栈与回溯算法

    摘要: 使用栈的数据结构及相应的回溯算法实现迷宫创建及求解,带点JavaGUI 的基础知识. 难度: 中级 迷宫问题是栈的典型应用,栈通常也与回溯算法连用. 回溯算法的基本描述是: (1)  选择一个 ...

  6. VMWare中桥接、NAT、Host-only

    1.概述 2.bridged(桥接模式) 3.NAT(网络地址转换模式) 4.host-only(主机模式) 5.replicate physical network connection state ...

  7. python socket编程函数介绍

    网上看到一个socket中常用函数的介绍,记录一下 https://blog.csdn.net/rebelqsp/article/details/22109925

  8. Python Web学习笔记之WebSocket 通信过程与实现

    一.什么是 WebSocket ? WebSocket 是一种标准协议,用于在客户端和服务端之间进行双向数据传输.但它跟 HTTP 没什么关系,它是基于 TCP 的一种独立实现. 以前客户端想知道服务 ...

  9. 20145127 《Java程序设计》第一周学习总结

    通过第一周的Java程序设计的学习,听了娄老师的第一堂课,虽然课堂上老师并没有一开始就讲许多专业的知识,而是带领着我们对于Java这门语言,并不仅仅是一门语言,经行了初步的认识与了解,并且对于Java ...

  10. 20145305 《网络对抗》MSF基础应用

    实践过程及结果截图 主动攻击ms08_067 Kali的IP:10.43.46.93 靶机的IP:10.43.49.28 MS08_067远程漏洞攻击实践:Shell 攻击成功的结果 在kali上执行 ...