Retina Images

作者：大漠 日期：2012-12-26 点击：438
Retina

特别声明：Retina Image是Jeremy Worboys创建，版权归于：

Creative Commons Attribution 3.0 Unported License

，如需转载此文，需在明显位置注明Retina Images官网地址：http://retina-images.complexcompulsions.com以及作者相关信息

 

作者：Jeremy Worboys

译者：大漠

GitHub查看下载Retina Images

关于Retina Images

Retina Images是为不同设备提供不同的的图像，换句话说“Retina Images是为不同分辨率设备查看，提供不同的图像”。

一旦安装在你的网站上（非常简单！）。你只需要为Retina屏幕设备创建高分辨率的图像，其他的Retina Images会帮你实现。你甚至不需要修改任何“<img>”标签（在img中设置他们的宽度和高度）。

Retina Images的工作原理

  1. 当服务器加载你的页面，通过“JavaScript”或者CSS（JavaScript禁用时），给“cookie”设置一个“devicePixlRatio”值。
  2. 当服务器接收到图像的加载请求时，“.htaccess”文件会告诉“retinaimages.php”加载服务器上的图像。
  3. “retinaimages.php”会按以下四个条件进行查询检查：
    • “cookie”中是否存在“devicePixelRatio”。
    • “cookie”中“devicePixelRatio”的值大于1。
    • 高分辨率图像是否存在。
  4. 上面任何一条不符合，将会发送普通分辨率图像。否则将给设备提供高分辨率的图像。

服务器的设置

安装Retina Images非常简单

1、将“retinaimages.php”和“.htaccess”文件安装在你服务器的根目录下（通常是在“public_html”文件目录）。

注意：如果你的项目中存在“.htaccess”文件，千万不要直接覆盖他，你只需要将文件中的内容复制后粘贴到你项目中的“.htaccess”文件中。

2、在每个页面的“<head>”区域中，在所有CSS文件前放置下面的JavaScript代码：

<script>
  (function(w){
    var dpr=((w.devicePixelRatio===undefined)?1:w.devicePixelRatio);
		if(!!w.navigator.standalone){
		  var r=new XMLHttpRequest();r.open('GET','/retinaimages.php?devicePixelRatio='+dpr,false);r.send()
		}else{
		  document.cookie='devicePixelRatio='+dpr+'; path=/'
		}
	})(window)
</script>

3、在“<body>”标签内插入下面的CSS：

<noscript>
  <style id="devicePixelRatio" media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)">
	  #devicePixelRatio{
		  background-image:url("/retinaimages.php?devicePixelRatio=2")
		}
	</style>
</noscript>

注意：上面这段代码一定要放置在“<body>”和“</body>”之间。

4、为高分辨率创建翻倍像素的图像，并以“@2x”关皱键词结尾保存高分辨率的图像。参考实例。

HTML图像

HTML图像是最简单的，你只需要设置“<img>”标签，可能工作起来没有任何变化。

你所担心的是，针对高分辨率图像，你必须在“<img>”标签中设置“width”和“height”属性值。

<img src="my-image.png" alt="My awesome image" width="300" height="90">

CSS图像

CSS图像通常需要做一下工作，使用CSS图像，必须配合“background-size”属性才能正常工作。下面是Retina屏幕下通过background-size来控制图像适应的三种简单方法：

CSS背景图像

使用像素“px”固定值，这个值等于非Retina下图像的尺寸大小：

.some-selector {
  background-image: url("my-image.png");
  background-size: 300px 90px;
}

图像替换

如果标准图像大小和容器大小一样，那么你可以通过下面的方法简单的实现：

.some-selector {
  background-image: url("my-image.png");
  background-size: 100% 100%;
}

.some-selector {
  background-image: url("my-image.png");
  background-size: cover;
}

注：有关于background-size的详细介绍，可以点击这里。

图像示例

普通显屏下图像（非Retina屏幕下）

Retina Images

settings.png

59px × 59px

Retina显屏下图像

Retina Images

settings@2x.png

118px × 118px

优点

  1. 用户只需下载一张图像；
  2. 支持所有图像格式；
  3. 如果高分辨率图像不能使用，会返回普通图像
  4. 如果“JavaScript”和“CSS”或者“Cookies”禁用，也将返回普通图像

缺点

  1. "<img>"标签心需设置明确的“width”和“height”属性值（属性值大小和普通图像大小一致）
  2. CSS背景图像必须使用“background-size”属性。

插件

Jordy Meow为Wordpress写了一个WP Retina 2x插件

让你的网站在Retina屏幕设备下图像看起清晰细腻。

特别声明：Retina Image由Jeremy Worboys创建，版权Creative Commons Attribution 3.0 Unported License。W3cplus仅根据Retina Images官网所译，为广在中国前端人员服务。如需转载需要在明显位置注官网地址: http://retina-images.complexcompulsions.com。

GitHub查看下载Retina Images

如需转载，烦请注明：http://www.w3cplus.com/css/retina-images.html

返回顶部