retinajs 使用方法
2016-06-30 15:39
351 查看
本文根据retinajs的官网翻译,如果有翻译错的地方,还请朋友指正。谢谢。
[b]工作原理:[/b]
现在有4种方式:
1.自动交换“img”标签的"src"路径。
2.在内联样式中自动交换背景图像的网址。
3.手动指定一个高分辨率的图像不同位置。
4.自动创建CSS背景图像媒体查询。
通常,在你的页面上引用一个图像,看起来像这样:
通过使用"data-rjs"属性,retina.js将会知道这个img标签需要引用哪张图片,任何不使用此属性的图像不会被处理。
把"data-rjs"的属性值设为3,就相当于你告知了retina.js您已创建了比传统像素密度大3倍的高分辨率图像(包括@2x和@3x的图片)。
当一个页面加载时,脚本将会检测用户的环境,看它适合展示哪种分辨率的图片。如果它检测出来的分辨率比你设置的要大,那么将会显示你设置的最大的分辨率的图片,如果比你设置的要小,该脚本将会匹配显示最合适的分辨率大小的图片,
它是通过改变你“img”标签里面的"src"的值来实现的,就像这样:
注意,脚本假设的是你使用苹果规定的高分辨率修饰符(@2X,3X”,等等)来表示你的服务器上的高分辨率图像。
如果你不使用苹果的规定,您可以使用“data-rjs”属性告诉retina.js你的高分辨率图片在哪个文件夹下面。像下面这样:
在这种情况下,该脚本不会基于用户的环境动态提供图片路径。它只会为您传递比传统分辨率高的图片。
您也可以通过使用retina.js内嵌样式设置背景图片。例如:
这将被转换为:
这对任何的HTML标签都有效,除了<img>标签。如果它是一个<img>标签,retina.js将会替换“src”属性的属性值。如果是别的,脚本会替换掉内嵌背景图片。其他工作完全一样。
如何使用它?
使用javascript(themodernway)
retina.js几乎与任何的javascript构建过程一样,你可以想像。源代码通过ES6编写,你可以通过NPM和Bow得到一个名为“retinajs”的安装包。
当你按照这种方式使用retina.js时,脚本假设你可能不希望自动运行。因此为了调用它,你需要做以下的事情:
JavaScript(theold-fashionedway)
这个脚本会帮助你把图片自动替换成高分辨率的图片(如果有高分辨率的图片)。它还创建一个叫做retinajs的全局函数,所以,只要你愿意,你可以重新初始化脚本。要使用它,你需要下载压缩版本,在</body>之前引用它。
1.把retina.min.js文件放入服务器上
2.在你的页面里面引用这个脚本
把它放在你页面的底部,</body>标签之前。
3.大功告成!
SCSS,Sass,LESS,andStylus
css预处理是在样式表中提供高分辨率的图片,每一种预处理机制,都有4个参数:
1.path-你的标准分辨率图像的路径。
2.cap-您准备的最高分辨率图片的等级。默认为2。
3.size-background-size的属性值。默认为autoauto。
4.extras-任何其他背景属性的属性值。默认没有。
mixin是通过解析后,创建媒体查询来引用到不同高分辨率的图片,同时提供一个原始图片的background-size为了维持合适的尺寸。要使用它,下载你最喜欢的mixin,然后引入或者包括到你的SCSS/Less/等样式表中,并且应用你选择的元素上去。
SCSS举例:
语法:
步骤:
1.添加
2.在你的样式表中,调用retinamixin,而不是使用
SCSS:
Sass:
[b]工作原理:[/b]
现在有4种方式:
1.自动交换“img”标签的"src"路径。
2.在内联样式中自动交换背景图像的网址。
3.手动指定一个高分辨率的图像不同位置。
4.自动创建CSS背景图像媒体查询。
通常,在你的页面上引用一个图像,看起来像这样:
<imgsrc="/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你的高分辨率图片在哪个文件夹下面。像下面这样:
<imgsrc="/images/my_image.png"data-rjs="/images/2x/my_image.png"/>
在这种情况下,该脚本不会基于用户的环境动态提供图片路径。它只会为您传递比传统分辨率高的图片。
您也可以通过使用retina.js内嵌样式设置背景图片。例如:
<divstyle="background:url(my_image.png);"data-rjs="3"/>
这将被转换为:
<divstyle="background:url(my_image@3x.png);"data-rjs="3"/>
这对任何的HTML标签都有效,除了<img>标签。如果它是一个<img>标签,retina.js将会替换“src”属性的属性值。如果是别的,脚本会替换掉内嵌背景图片。其他工作完全一样。
retina.js同时也可以在SCSS,Sass,Less,andStylus使用!
我们稍后将会讲解。如何使用它?
使用javascript(themodernway)
retina.js几乎与任何的javascript构建过程一样,你可以想像。源代码通过ES6编写,你可以通过NPM和Bow得到一个名为“retinajs”的安装包。
当你按照这种方式使用retina.js时,脚本假设你可能不希望自动运行。因此为了调用它,你需要做以下的事情:
importretinafrom'retinajs'; window.on('load',retina);
JavaScript(theold-fashionedway)
这个脚本会帮助你把图片自动替换成高分辨率的图片(如果有高分辨率的图片)。它还创建一个叫做retinajs的全局函数,所以,只要你愿意,你可以重新初始化脚本。要使用它,你需要下载压缩版本,在</body>之前引用它。
1.把retina.min.js文件放入服务器上
2.在你的页面里面引用这个脚本
<scripttype="text/javascript"src="/scripts/retina.min.js"></script>
把它放在你页面的底部,</body>标签之前。
3.大功告成!
SCSS,Sass,LESS,andStylus
css预处理是在样式表中提供高分辨率的图片,每一种预处理机制,都有4个参数:
1.path-你的标准分辨率图像的路径。
2.cap-您准备的最高分辨率图片的等级。默认为2。
3.size-background-size的属性值。默认为autoauto。
4.extras-任何其他背景属性的属性值。默认没有。
mixin是通过解析后,创建媒体查询来引用到不同高分辨率的图片,同时提供一个原始图片的background-size为了维持合适的尺寸。要使用它,下载你最喜欢的mixin,然后引入或者包括到你的SCSS/Less/等样式表中,并且应用你选择的元素上去。
SCSS举例:
语法:
@includeretina('/images/my_image.png',3,100px50px,centercenterno-repeat);
步骤:
1.添加
retinamixin到你的样式表中。
2.在你的样式表中,调用retinamixin,而不是使用
background-image
SCSS:
#logo{@includeretina('my_image.png',3,100px50px,centercenterno-repeat);}
Sass:
#logo
+retina('my_image.png',3,100px50px,centercenterno-repeat);
Less:
#logo{
.retina('my_image.png',3,100px50px,centercenterno-repeat);
}
Stylus:
#logo retina('my_image.png',3,100px50px,centercenterno-repeat); 将编译成:
#logo{
background:url("my_image.png")centercenterno-repeat;
background-size:100px50px;
}
@mediaalland(-webkit-min-device-pixel-ratio:1.5),
alland(-o-min-device-pixel-ratio:3/2),
alland(min--moz-device-pixel-ratio:1.5),
alland(min-device-pixel-ratio:1.5){
#item{
background:url("my_image@2x.png")centercenterno-repeat;
background-size:100px50px;
}
}
@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
#item{
background:url("my_image@2x.png")centercenterno-repeat;
background-size:100px50px;
}
}
@media(-webkit-min-device-pixel-ratio:3),(min-resolution:288dpi){
#item{
background:url("my_image@3x.png")centercenterno-repeat;
background-size:100px50px;
}
}
相关文章推荐
- js精确计算
- jsp实现局部刷新的一种方法
- 解决使用fastJson中出现$ref问题
- JavaScript高级程序设计——第3章:基本概念
- js——页面回到顶部
- 前台JS 实现截图保存功能
- fastjson解析json时报错default constructor not found. class............
- JS实现添加,替换,删除节点元素的方法
- JAVASCRIPT下window.location.href通过url传递参数
- JS设计模式
- 关于JS 事件冒泡和onclick,click,on()事件触发顺序
- 获取URL参数的几种方式
- js取得文档的高度和宽度
- JSP简易聊天室
- Js数组的sort排序详解
- 使用 JS 访问服务器地址实现下载文件
- JavaScript技巧
- JavaScript技巧
- JavaScript技巧
- JavaScript技巧