retinajs 使用方法

本文根据retinajs的官网翻译，如果有翻译错的地方，还请朋友指正。谢谢。

工作原理：

现在有4种方式：

　　1.自动交换“img”标签的"src"路径。

　　2.在内联样式中自动交换背景图像的网址。

　　3.手动指定一个高分辨率的图像不同位置。

　　4.自动创建CSS背景图像媒体查询。

 

通常，在你的页面上引用一个图像，看起来像这样：

<img src="/images/my_image.png" data-rjs="3" />

通过使用"data-rjs"属性，retina.js将会知道这个img标签需要引用哪张图片，任何不使用此属性的图像不会被处理。

 

把"data-rjs"的属性值设为3，就相当于你告知了retina.js您已创建了比传统像素密度大3倍的高分辨率图像（包括@2x和@3x的图片）。

当一个页面加载时，脚本将会检测用户的环境，看它适合展示哪种分辨率的图片。如果它检测出来的分辨率比你设置的要大，那么将会显示你设置的最大的分辨率的图片，如果比你设置的要小，该脚本将会匹配显示最合适的分辨率大小的图片，

它是通过改变你“img”标签里面的"src"的值来实现的，就像这样：

"/images/my_image@3x.png"

 

注意，脚本假设的是你使用苹果规定的高分辨率修饰符（@ 2X，3X”，等等）来表示你的服务器上的高分辨率图像。

 

如果你不使用苹果的规定，您可以使用“data-rjs”属性告诉retina.js你的高分辨率图片在哪个文件夹下面。像下面这样：

<img src="/images/my_image.png" data-rjs="/images/2x/my_image.png" />

在这种情况下，该脚本不会基于用户的环境动态提供图片路径。它只会为您传递比传统分辨率高的图片。

 

您也可以通过使用retina.js内嵌样式设置背景图片。 例如：

<div style="background: url(my_image.png);" data-rjs="3" />

 

这将被转换为：

<div style="background: url(my_image@3x.png);" data-rjs="3" />

 

这对任何的HTML标签都有效，除了<img>标签。如果它是一个<img>标签，retina.js将会替换“src”属性的属性值。如果是别的，脚本会替换掉内嵌背景图片。其他工作完全一样。

retina.js 同时也可以在 SCSS, Sass, Less, and Stylus使用!

我们稍后将会讲解。

如何使用它？

使用javascript(the modern way)

retina.js几乎与任何的javascript构建过程一样，你可以想像。源代码通过ES6编写，你可以通过NPM和Bow得到一个名为“retinajs”的安装包。

当你按照这种方式使用retina.js时，脚本假设你可能不希望自动运行。因此为了调用它，你需要做以下的事情：

import retina from 'retinajs';

window.on('load', retina);

JavaScript (the old-fashioned way)

这个脚本会帮助你把图片自动替换成高分辨率的图片（如果有高分辨率的图片）。它还创建一个叫做retinajs的全局函数，所以，只要你愿意，你可以重新初始化脚本。要使用它，你需要下载压缩版本，在</body>之前引用它。

　　1.把retina.min.js文件放入服务器上

　　2.在你的页面里面引用这个脚本

　　<script type="text/javascript" src="/scripts/retina.min.js"></script>

　　把它放在你页面的底部，</body>标签之前。

　　3.大功告成！

SCSS, Sass, LESS, and Stylus

css预处理是在样式表中提供高分辨率的图片，每一种预处理机制，都有4个参数：

　　1.path - 你的标准分辨率图像的路径。

　　2.cap - 您准备的最高分辨率图片的等级。默认为2。

　　3.size - background-size的属性值。默认为auto auto。

　　4.extras - 任何其他背景属性的属性值。默认没有。

mixin是通过解析后，创建媒体查询来引用到不同高分辨率的图片，同时提供一个原始图片的background-size为了维持合适的尺寸。要使用它，下载你最喜欢的mixin，然后引入或者包括到你的SCSS/Less/等样式表中，并且应用你选择的元素上去。

SCSS举例：

语法：

　　@include retina('/images/my_image.png', 3, 100px 50px, center center no-repeat);

步骤：

　　1.添加 retina mixin到你的样式表中。

　　2.在你的样式表中，调用retina mixin,而不是使用 background-image

　　　　SCSS:

　　　　#logo { @include retina('my_image.png', 3, 100px 50px, center center no-repeat); }

　　　　Sass:

　　　　#logo

　　　　+retina ('my_image.png', 3, 100px 50px, center center no-repeat); 

　　　　Less:
　　　#logo {
  　　.retina('my_image.png', 3, 100px 50px, center center no-repeat);
　　　}
　
　　　Stylus:

　　　#logo
  　　　　retina('my_image.png', 3, 100px 50px, center center no-repeat);

将编译成：

　　#logo {
      background: url("my_image.png") center center no-repeat;
      background-size: 100px 50px;
    }

    @media all and (-webkit-min-device-pixel-ratio: 1.5),
           all and (-o-min-device-pixel-ratio: 3 / 2),
           all and (min--moz-device-pixel-ratio: 1.5),
           all and (min-device-pixel-ratio: 1.5) {
      #item {
        background: url("my_image@2x.png") center center no-repeat;
        background-size: 100px 50px;
      }
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      #item {
        background: url("my_image@2x.png") center center no-repeat;
        background-size: 100px 50px;
      }
    }

    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
      #item {
        background: url("my_image@3x.png") center center no-repeat;
        background-size: 100px 50px;
      }
    }