HTML5响应式图片技术中文图解

一、本文内容干货量远不及之前的那篇

首先,需要声明,或者叫告知吧,就是,本文属于补充,真正关于响应式图片技术的干货内容参见我之前的“响应式图片srcset全新释义sizes属性w描述符”一文。

提前说明下,本文的示意图片均来自:The anatomy of responsive images

我只是把上面的英文变成了中文,一些图片时候实时效果可以去原页面观摩。

另外,补充了一些遗漏的关于响应式图片处理的tips.

1. 作为背景图片,image-set()这厮
这个是我自己补充的,精力有限,我就不作图了,嘻嘻,使用示意如下(目前需要-webkit-私有前缀):

兼容性如下:

2. 尺寸固定,密度变化

 

这里出现了srcset,兼容性如下:

3. 尺寸和密度都变化

 

4. 尺寸,密度,资源都变化

 
5. 不同的图片类别
 

二、直接结语

本文主要图解了几种HTML侧的响应式图片的用法说明,希望可以对移动端同学的学习有所帮助。

1 1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部