retina-fit-helloweb v0.0.2

retina-fit

retina-fit为高清屏适配方案，支持由高倍图片自动化输出低倍图，css文件中px自动转换成rem

高清屏适配建议方案：

retina-fit做什么

• 1、提供高倍图转换低倍图自动化工具
• 2、css文件中px单位转换rem自动化工具
• 3、cdn图片按需返回配置方案
• 4、提供前端配置js文件

对比原开发方式，你需要做的工作：

 1、输出高倍图切图
 2、使用工具自动化处理图片和样式文件
 3、加载一段js

如何使用

自动化工具

自动化工具已包装成hello web插件

装载hello web插件步骤：

1、将此插件下载至本地 git clone http://git.code.oa.com/ileneyang/retina-fit-helloweb.git

2、打开hello web插件面板，点击新建插件-> 点击“已有插件？点击导入”选择retina-fit-helloweb

使用说明&图示

1、选择一个文件夹/一个图片文件/一个样式文件， 右键显示操作菜单

2、参数自定义：设置原图倍数1-3、rem基准，点击“开始处理”按钮

3、生成文件说明

图片

- 命名：以文件orgin.png为例，输出的2倍图片为： origin__@2x.png

- 以`__@(multiple)x`为结尾命名的图片将被视为自动处理过的图片，不会被处理，原图请勿用`__@(multiple)x`命名图片

样式文件

- 命名：以 px.css文件为例，输出文件为 px__px2rem.css

- 以1rem=10px为基准，css文件中以px为单位的像素值均被转换成rem

- 若不希望某些值不被转换，则可如下处理：

.classname{
    font-size: 12px; /* no */
}

注释`/* no */`表明此单位不被转换

cdn服务器配置说明

项目cdn服务器需统一配置

服务器配置方案原本使用的 Retina-Images，但是Retina-Images方案依赖服务器端部署应用(PHP)来返回图片，在实际的部署中会带来一定的门槛与环境依赖，而Retina-Images方案中的PHP所做的事就是根据cookie中的devicePixelRati值来构造链接，判断文件是否存在，然后返回文件，而这些Nginx都能做到，因此我们推出了Nginx版本的解决方案：

只需要在Nginx配置文件中加上如下配置：

# nginx Config File for retina-fit
server{
    	# ......
    
        location ~ ^(.*)\/(.*)\.(jpg|jpeg|png|bmp|gif|tiff){
        	try_files $1/$2__@${cookie_devicePixelRatio}x.$3 $uri 404;
    	} 
}

配置说明：

请求图片时会匹配这个正则表达式，可以根据从正则表达式中匹配到的项构造一个新的uri链接，例如cookie中的devicePixelRatio值为2的请求/images/test.png会被构造成/images/test__@2x.png。try_files语句的意思是一开始会请求/images/test__@2x.png，如果没找到这个文件，则会请求/images/test.png，相当于倍图不存在时也能返回默认尺寸图片。

前端配置js文件

按需返回倍图+页面rem适配配置

包含：

1、自动在meta注入<meta name="viewport" content="width=device-width, initial-scale=1, ,maximum-scale=1,minimum-scale=1, user-scalable=no" />

2、cookie注入：devicePixelRatio值

3、rem.js，自动设置根节点font-size值，作为rem适配

!function(e){var t,i,n,l,c;function a(){var t=e.document.documentElement,i=t.getBoundingClientRect().width;t.style.fontSize=i>=562.5?"15px":i<=320?"8.53px":i/37.5+"px"}!function(){var t=e.document,i=t.createElement("meta");i.name="viewport";i.content="width=device-width, initial-scale=1, ,maximum-scale=1,minimum-scale=1, user-scalable=no",t.documentElement.firstElementChild.insertBefore(i,t.documentElement.firstElementChild.firstElementChild)}(),a(),t=e.devicePixelRatio&&e.devicePixelRatio||1,i="devicePixelRatio",n=Math.min(Math.ceil(t),3),l=null,(c=new Date).setDate(c.getDate()+l),e.document.cookie=i+"="+escape(n)+(null==l?"":";expires="+c.toGMTString()),e.addEventListener("resize",function(){a()})}(window);

若只想做图片适配，下面的更适合：

包含：cookie注入：devicePixelRatio值

!function(e){var i,t,a,n,o;i=e.devicePixelRatio&&e.devicePixelRatio||1,t="devicePixelRatio",a=Math.min(Math.ceil(i),3),n=null,(o=new Date).setDate(o.getDate()+n),e.document.cookie=t+"="+escape(a)+(null==n?"":";expires="+o.toGMTString())}(window);

F&Q

还不适应hello web工具的小伙伴们，也有更极客的方式，详见：http://tnpm.oa.com/package/@tencent/retina-fit

待体验