这篇文章发布于 2015年11月6日,星期五,00:40,归类于 CSS相关。 阅读 49022 次, 今日 2 次 8 条评论
by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=5045
一、本文内容干货量远不及之前的那篇
首先,需要声明,或者叫告知吧,就是,本文属于补充,真正关于响应式图片技术的干货内容参见我之前的“响应式图片srcset全新释义sizes属性w描述符”一文。
提前说明下,本文的示意图片均来自:The anatomy of responsive images
我只是把上面的英文变成了中文,一些图片时候实时效果可以去原页面观摩。
另外,补充了一些遗漏的关于响应式图片处理的tips.
1. 作为背景图片,image-set()这厮
这个是我自己补充的,精力有限,我就不作图了,嘻嘻,使用示意如下(目前需要-webkit-
私有前缀):
.example {
background-image: -webkit-image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );
}
兼容性如下:
2. 尺寸固定,密度变化
这里出现了srcset
,兼容性如下:
3. 尺寸和密度都变化
4. 尺寸,密度,资源都变化
5. 不同的图片类别
二、直接结语
本文主要图解了几种HTML侧的响应式图片的用法说明,希望可以对移动端同学的学习有所帮助。
以上~
最后,祝大家今天能遇到如下图所示的好事情!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:http://www.zhangxinxu.com/wordpress/?p=5045
(本篇完)
- 为什么HTML <picture>元素很少见人使用? (1.000)
- 响应式图片srcset全新释义sizes属性w描述符 (0.375)
- 我们一起学习CSS image-set() (0.250)
- 详细介绍HTML favicon尺寸 格式 制作等相关知识 (0.188)
- 见多识广,介绍Web开发中current开头的一些API属性 (0.188)
张大大 页面上新增的广告别让他会动啊 干扰注意力lol
谢谢,你的内容对我很有帮助,最后的那张图片来源是哪里的啊
学习中,有时间再认真研读下博主《响应式图片srcset全新释义sizes属性w描述符》一文.
文章中svg图片是怎么实现的?纯手写的么?
这是之前翻译的这篇文章,欢迎大家指正。里面还有自己的一些理解和demo。
https://github.com/riskers/blog/issues/5
新 w 描述的不就是 对于 设备 像素么。
1x 的显示器 显示 340px 图片 使用的设备像素就是 340(w) 所以是 512px的图、
1x 的显示器 显示 128px 图片 使用的设备像素就是256 (w)所以是 256px的图、
问题是显示chrome怎么总是显示 512 ??? 又改了方式?
http://www.zhangxinxu.com/study/201410/srcset-sizes.html
棒棒哒
班长大人说这句话的时候真把我笑喷