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

支持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的一个草案,希望将来能写到标准中,造福于苦逼的前端人员。

时间: 2024-08-05 20:41:47

image-set实现Retina屏幕下图片显示详细介绍的相关文章

image-set实现Retina屏幕下图片显示[转载]

最近一直在学习Retina屏幕下图片的处理方法,从<走向视网膜(Retina)的Web时代>一文中知道了Retina这个新名词,同时知道了他是什么东东,同时也继续在探讨Retina方面的知识点,随后在<移动Web——CSS为Retian屏幕替换图片>和<使用css sprites来优化你的网站在Retina屏幕下显示>中学习了Retina屏幕下图片的设置方法,或者说技巧吧,接下来<Web设计师如何制作Retina图像>学习了Retina屏幕下的图片制作技巧.

win7系统扩展双屏幕时,如何在两个屏幕下都显示任务栏

扩展屏幕下都显示任务栏!!! win7系统本身无法设置该功能(目前我是不知道) 但可以下载第三方软件来解决该问题. 第一步:Dual Monitor Taskbar 下载软件 下载链接:http://pan.baidu.com/s/1o61isjw 密码:yzcp 第二步:安装完在扩展屏幕上便会出现任务栏 第三步:在扩展屏下任务栏中右击属性来设置相关的功能. 比如显示Windows按键.可以 镜像-两个任务栏控制同一个页面,也可以设置单独控制自己显示屏页面. 这样便解决了两个屏幕双任务栏的功能了

Linux下VI命令详细介绍

vi 是"Visual Interface" 的简称,它在Linux 上的地位就仿佛Edit 程序在DOS上一样.它可以执行输出.删除.查找.替换.块操作等众多文本操作,而且用户可以根据自己的需要对其进行定制,这是其他编辑程序所没有的. vi 不是一个排版程序,它不象Word 或WPS 那样可以对字体.格式.段落等其他属性进行编排,它只是一个文本编辑程序. vi 没有菜单,只有命令,且命令繁多.限于篇幅,本文只介绍常用的命令. Vi 有三种基本工作模式:命令行模式,文本输入模式和末行模

[转载]linux下configure命令详细介绍

原文链接:http://www.chinaz.com/server/2009/0807/85792.shtml . Linux环境下的软件安装,并不是一件容易的事情;如果通过源代码编译后在安装,当然事情就更为复杂一些;现在安装各种软件的教程都非常普遍;但万变不离其中,对基础知识的扎实掌握,安装各种软件的问题就迎刃而解了.Configure脚本配置工具就是基础之一,它是autoconf的工具的基本应用. 与一些技巧相比,Configure显得基础一些,当然使用和学习起来就显得枯燥乏味一些,当然要成

linux下configure命令详细介绍

Linux环境下的软件安装,并不是一件容易的事情;如果通过源代码编译后在安装,当然事情就更为复杂一些;现在安装各种软件的教程都非常普遍;但万变不离其中,对基础知识的扎实掌握,安装各种软件的问题就迎刃而解了.Configure脚本配置工具就是基础之一,它是autoconf的工具的基本应用. 与一些技巧相比,Configure显得基础一些,当然使用和学习起来就显得枯燥乏味一些,当然要成为高手,对基础的熟悉不能超越哦. 为此我转载了一篇关于Configure选项配置的详细介绍.供大家参考 'confi

自定义RatingBar,不同分辨率屏幕下图片拉伸或者显示不完整问题解决

1.需要两张评分图片ic_rating_highlight.png ic_rating_normal_white.png(宽高都是52px,且有内边距)  将这两张图片添加到各分辨率文件夹下 2.drawable下添加dw_ratingbar_white.xml 1 <?xml version="1.0" encoding="utf-8"?> 2 <layer-list xmlns:android="http://schemas.andr

angular调用WCF服务,读取文件夹下图片显示列表,下载另存为图片

读取文件夹下的文件 public string ReadImagesPaths() { string result = string.Empty; try { string path = System.IO.Directory.GetCurrentDirectory(); DirectoryInfo files = new DirectoryInfo(path+@"\Images"); FileInfo[] fileinfo = files.GetFiles(); foreach (F

点击商品图片显示详细商品页面

1.点击商品链接: * 传递商品id. 2.编写Action: * 编写Action类,继承ActionSupport实现模型驱动接口. * 编写一个执行的方法. public class ProductAction extends ActionSupport implements ModelDriven<Product> { //用于接收数据的模型驱动 private Product product=new Product(); public Product getModel() { ret

CentOS下crond定时任务详细介绍

目录 1.定时任务crond介绍... 2.crond定时任务限权... 3.Crontab用法... 4.Crontab命令的书写格式... 5.定时服务器时间同步... 6.写定时任务注意点.. 7.调试定时任务... 1.定时任务crond介绍 1>定时任务软件种类 at 适合仅执行一次就结束的调度命令,需要启动一个后端的atd服务. crontab 需要启动一个服务crond才行,crond服务通过crontab命令实现. anacron 无法周期性执行,只能以天为周期,但有个特点,在关