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:
#logoretina('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 使用方法相关推荐
- 在 Oracle Enterprise Linux 和 iSCSI 上构建您自己的 Oracle RAC 11g 集群
作者:Jeffrey Hunter 了解如何以低于 2,700 美元的费用在 Oracle Enterprise Linux 上安装并配置 Oracle RAC 11g 第 2 版开发集群. 本指南中 ...
- Java面试题大全2021版
一.Java 基础 JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java Run ...
- Kotlin协程使用,协程使用注意事项,协程中的await方法使用|不使用suspend使用协程
参见 码云 协程使用方法一 (Dispatchers调度器模式) 指定不同线程.同线程会挂起并阻塞(挂起是不影响主线程执行,阻塞是同样的IO线程会阻塞) withContext(Dispatchers ...
- IDEA中将代码块封装为方法,IDEA代码重构快捷键
IDEA中将代码块封装为方法 选中要转换的代码块,快捷键: Windows快捷键:Alt + Shift + M Mac快捷键:Alt + Command + M 如图:
- IDEA自动生成对象所有set方法
idea中有一款插件能够生成对象所有的set方法,GenerateAllSetter :下载地址 步骤1:将下载好的压缩包放在自己记得的文件夹中,在idea中进行导入 步骤2:在本地选中刚才的压缩包, ...
- List元素互换,List元素转换下标,Java Collections.swap()方法实例解析
Java Collections.swap()方法解析 jdk源码: public static void swap(List<?> list, int i, int j) {// ins ...
- java1.8新增超实用Map方法——Map.getOrDefault()和Map.value()方法详解
1. Map.getOrDefault() 翻译一下官方解释: java.util.Map<K, V> V getOrDefault(Object key, V defaultValue) ...
- spring boot项目 中止运行 最常用的几种方法
spring boot项目 中止运行 最常用的几种方法: 1. 调用接口,停止应用上下文 @RestController public class ShutdownController impleme ...
- Java Calendar.add()方法的使用,参数含义。指定时间差。
cal.add()方法中的参数含义: 第一个参数如果是1则代表的是对年份操作,2是对月份操作,3是对星期操作,5是对日期操作,11是对小时操作,12是对分钟操作,13是对秒操作,14是对毫秒操作. 第 ...
最新文章
- 前端知识点回顾之重点篇——JavaScript异步机制
- CRUD-员工列表 大体流程
- CentOS7 minimal 安装
- arduino蜂鸣器_板卡推荐BPIUNO32 arduino 开发板,支持webduino与arduino应用
- 北京尚学堂|程序员的智慧
- 二、scrapy爬虫框架——scrapy构造并发送请求
- js cookie 存储checkbox_浏览器数据存储方式总结,网友:“精辟”!
- ICCV 2019 | 基于轻量级新架构OSNet的域适应改进ReID
- “WPF” VS “Silverlight”
- 缓存设计方案 你了解吗 SpringBoot 快速集成实现一级缓存Redis和二级缓存Caffeine 可自定义扩展
- 算法学习 -- 枚举
- Hibernate处理MySQL的时间
- java后台如何国际化,Java SpringMVC实现国际化整合案例分析(i18n)
- python入门教程(非常详细),从零基础入门到精通,看完这一篇就够了
- android逆向工程反编译指南(详细教程)
- 大一计算机实验报告excle,excel实验报告总结
- python基础语法25_Python基础语法习题参考(0-9关)
- 5.文献研读---基于教育数据挖掘的在线学习者 学业成绩预测建模研究--陈子健 朱晓亮...
- 从 OKR 工作法到 OKRs-E,落地OKR不能错过的转变
- 计算机网络 ping中ttl,ping命令显示的TTL是什么意思?