image-set实现Retina屏幕下图片显示详细介绍


Posted in HTML / CSS onDecember 24, 2012

在不支持image-set的浏览器下,他会支持background-image图像,也就是说不支持image-set的浏览器下,他们解析background-image中的背景图像;
支持image-set:如果你的浏览器支持image-sete,而且是普通显屏下,此时浏览器会选择image-set中的@1x背景图像;
Retina屏幕下的image-set:如果你的浏览器支持image-set,而且是在Retina屏幕下,此时浏览器会选择image-set中的@2x背景图像。
上面就是有关于“image-set”的简单介绍。
为什么要使用image-set而不使用Media Queries?
如果你有阅读有关于Retina的文章,你就会知道,在Retina屏幕下实现图像显示的方法有很多种,比如说“img”标签方法、javascript和方法,还有“Media Queries”方法,特别是“Media Queries”方法(如果你不清楚这些方法,可以点击 这和这)。既然有这么多种方法要以实现Retina屏幕下的图像显示,那么为什么还要使用“image-set”方法。这个问题问得非常的好。Jason Grigsby 在“Safari 6 and Chrome 21 add image-set to support retina images ”中把为什么要使用“image-set”而不使用CSS3的“Media Queries”实现Retina屏幕下图像方法做了两点描述。

不像Media Queries,image-set不需要告诉浏览器使用什么图像,而是直接提供了图像让浏览器选择。在未来,我希望有人在使用Retina设备浏览网页,但网速慢时,告诉设备采用低分辨率的图像。甚至会更好,他能根据网速智能的选择需要的图像。

使用“Media Queries”的问题是,在高分辨率显示器下他没有选择的权利。也就是说,浏览器分辨率等于1或2或者其他的时候,浏览器必须加载指定的图像。
image-set的好处是,在支持image-set的浏览器会在高分辨下匹配需要的图像,而没有其他额外的功能。但我相信,为浏览器提供不同的图像选择,这浏览器在不同的分辨下选择正确的图像。
image-set能让各种不同分辨下的图像都显示在CSS中的同一个地方。而使用media queries显示不同图像时,你可能会隔开很多行代码,难于寻找到对应的图像。

image-set真的好强大,很可惜的是,他仅支持background-image属性,而不能使用在“<img>”标签中。
前面也说过了,目前image-set只能使用webkit浏览器的私有属性“-webkit”在“Safari6”和“Chrome21”下运行。现在在IOS 6得到 支持。不过很遗憾的是,目前别的浏览器还是不支持image-set,现在他仅是CSS4的一个草案,希望将来能写到标准中,造福于苦逼的前端人员。

image-set虽然目前是一个全新的属性,没有几个浏览器支持,但这是一种新技术,我们需要用起来,只有用的人多了,将来才有机会写入标准的规范中,正所谓“世上本无路,走的人多了,路就出来了”。但话说回来,这种技术用来解决Retina屏幕下的图像显示,是一种绝佳的方法,如果你开会的项目中有汲及到Retina设备的,不仿大胆的使用起image-set,就像qq.com这大佬一样。
东一榔头西一棒的说完了image-set,如果你不知道他是怎么一回事,其实不要紧,你只要先知道这样使用能帮你解决问题就OK,因为有太多的为什么我们无能力现在解决,但随着时间的累积,我们终有一天能搞明白他的原理。最后希望这篇文章能帮到大家,如果你有更好的方法,记得与我们一起分享。

HTML / CSS 相关文章推荐
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
使用HTML5做个画图板的方法介绍
May 03 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
May 28 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 #HTML / CSS
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
Dec 19 #HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 #HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 #HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 #HTML / CSS
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
Dec 10 #HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 #HTML / CSS
You might like
PHP实现分页的一个示例
2006/10/09 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
微信小程序movable view移动图片和双指缩放实例代码
2017/08/08 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
Python连接Redis的基本配置方法
2018/09/13 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
Python安装Bs4的多种方法
2020/11/28 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
结构和类有什么异同
2012/07/16 面试题
财务科长个人对照检查材料
2014/09/18 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
浅谈Python魔法方法
2021/06/28 Java/Android