image-set实现Retina屏幕下图片显示详细介绍
程序员文章站
2023-01-06 08:59:20
在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像,本文接下来会介绍image-set实现Retina屏幕... 12-12-24...
在不支持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，因为有太多的为什么我们无能力现在解决，但随着时间的累积，我们终有一天能搞明白他的原理。最后希望这篇文章能帮到大家，如果你有更好的方法，记得与我们一起分享。
支持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，因为有太多的为什么我们无能力现在解决，但随着时间的累积，我们终有一天能搞明白他的原理。最后希望这篇文章能帮到大家，如果你有更好的方法，记得与我们一起分享。