本文根据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;
      }
    }
 
 

retinajs 使用方法的更多相关文章

  1. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  2. mapreduce多文件输出的两方法

    mapreduce多文件输出的两方法   package duogemap;   import java.io.IOException;   import org.apache.hadoop.conf ...

  3. 【.net 深呼吸】细说CodeDom(6):方法参数

    本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...

  4. IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法

    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...

  5. 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例

    前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...

  6. [C#] C# 基础回顾 - 匿名方法

    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在 ...

  7. ArcGIS 10.0紧凑型切片读写方法

    首先介绍一下ArcGIS10.0的缓存机制: 切片方案 切片方案包括缓存的比例级别.切片尺寸和切片原点.这些属性定义缓存边界的存在位置,在某些客户端中叠加缓存时匹配这些属性十分重要.图像格式和抗锯齿等 ...

  8. [BOT] 一种android中实现“圆角矩形”的方法

    内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...

  9. JS 判断数据类型的三种方法

    说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Functi ...

随机推荐

  1. createDocumentFragment() 创建文档碎片节点

    var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...

  2. 判断一个变量的类型Object.prototype.toString.call

    var num = 1;alert(Object.prototype.toString.call(num)); // [object Number]var str = 'hudidit.com';al ...

  3. HTML 学习笔记 JavaScript (节点)

    HTML 节点: HTML DOM定义了所有HTML元素的对象和属性 以及访问它们的方法. HTML DOM是关于如何获取 修改 添加 或 删除HTML元素的标准. 在js中通过document这个对 ...

  4. PHP程序设计

    ① 在设计评论系统时,关于文章的一些属性,我们最好存放在一个内存缓存中,通过下面的设计每次仅需要查询一次即可获取文章的所有属性 class CommentsDoc{ private static $d ...

  5. PL/SQL Developer 11 64bit 安装和配置

    安装后, 1. 解压 instant client 到plsql developer 的安装目录    注意, 此版本只支持 instantclient_11_x, 不支持 instantclient ...

  6. C# 根据正则表达式来判断输入的是不是数字

    最近在做输入判断的时候出现了一个需要判断输入合法性的问题,就是判断输入的是不是数字,判断方法是根据正则表达式来判断,具体方法如下: private bool IsRightNum(string str ...

  7. linux addr2line 定位so库崩溃位置

    在Linux下写C/C++程序的程序员,时常与Core Dump相见.在内存越界访问,收到不能处理的信号,除零等错误出现时,我们精心或不精心写就的程序就直接一命呜呼了,Core Dump是Linux仁 ...

  8. 工作随笔——使用svnsync实时备份SVN版本库

    前段时间把SVN版本库从win迁移到了Linux上,没隔几天那台win的磁盘就严重坏道了....这TMD什么运气! 花费了点时间研究了下svn自己的同步工具.写个日志记录下. 注意:svnsync要求 ...

  9. Theano2.1.13-基础知识之PyCUDA、CUDAMat、Gnumpy的兼容

    来自:http://deeplearning.net/software/theano/tutorial/gpu_data_convert.html PyCUDA/CUDAMat/Gnumpy comp ...

  10. 项目分享五:H5图片压缩与上传

    一.简介 图片的压缩与上传,是APP里一个很常用的功能.我们来年看 ChiTuStore 是怎样做的.相关文件 App/Module/User/UserInfo.html,App/Module/Use ...