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/[e-mail]"

 

注意，腳本假設的是你使用蘋果規定的高分辨率修飾符（@ 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([e-mail]);" 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("[e-mail]") center center no-repeat;
        background-size: 100px 50px;
      }
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
      #item {
        background: url("[e-mail]") center center no-repeat;
        background-size: 100px 50px;
      }
    }

    @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
      #item {
        background: url("[e-mail]") center center no-repeat;
        background-size: 100px 50px;
      }
    }