retina.js 技术文档

1. 安装指南

retina.js 的安装非常简单，您可以选择以下任一方式：

• 传统方式：下载 retina.min.js 文件，并将其放置在您的服务器上。然后，在您的 HTML 文件底部，即在 </body> 标签之前，引入该脚本。

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

使用这种方式，retina.js 将在页面加载时自动运行。

• 现代方式：如果您使用的是 Gulp、Webpack、Grunt、CommonJS 等构建过程，可以通过 require（或 ES6 的 import）将 retina.js 引入您的应用中。这种方式不会自动运行脚本，而是让您决定何时运行。

import retina from 'retina';

window.addEventListener('load', retina);

2. 项目的使用说明

retina.js 支持多种使用方式，以下是一些常见的使用场景：

• 自动替换 img 标签的 src 路径：retina.js 会检查设备的环境分辨率，并动态地提供合适的图像版本。
• 自动替换内联样式的背景图像 URL：通过在非 img 元素上应用 data-rjs 属性，retina.js 会替换内联背景图像。
• 手动指定高分辨率图像路径：您可以手动指定高分辨率图像的路径，而不是让 retina.js 根据环境动态生成路径。
• 自动生成媒体查询：retina.js 提供了 SCSS、Sass、Less 和 Stylus 的 mixin，用于自动生成适应不同分辨率环境的媒体查询。

3. 项目 API 使用文档

retina.js 提供了一个全局可用的 retinajs 函数，可以用来手动初始化或重新初始化图像替换。以下是函数的几种调用方式：

retinajs();
// 处理所有尚未处理的图像。

retinajs( [img, img, img] );
// 仅处理集合中的图像。

retinajs( $('img') );
// 同上。

retinajs( document.querySelectorAll('img') );
// 同上。

4. 项目安装方式

请参考以下步骤进行 retina.js 的安装：

• JavaScript：根据您的项目配置，选择以下任一方式。

  • 传统方式：下载 retina.min.js 文件并手动引入到 HTML。
  • 现代方式：通过 require 或 import 将 retina.js 引入到您的 JavaScript 构建过程中。

• CSS 预处理器：将对应的 mixin (@mixin retina( ... )) 添加到您的 CSS 预处理器文件中，并根据需要调用。

以上是 retina.js 的技术文档，希望对您的使用有所帮助。