flexible.js-移动端H5页面适配应用

前端页面适配有两大方向：一是布局适配，可使PC、手机、平板共用一份代码，实现方法有css 媒体查询、css 弹性盒子布局、 css grid布局等。二是高清适配，面对的是移动开发中设备不一样分辨率和不一样尺寸，最大限度还原设计稿效果。

flexible.js是高清适配的一种方法，它经过javascript根据不一样设备的dpr值和设备宽度为html动态设置font-size，其余元素使用rem作单位。

原理：

与flexible密切相关的是dpr概念，有如下公式：

dpr(设备像素比) = 物理像素(屏幕像素) / 设备独立像素（css像素）

普通屏幕dpr为1，高清屏幕的dpr为2或者更高。咱们样式代码上定义的元素大小是css像素，所以意味着普通屏和高清屏上展示的像素会有不一样。例如

width:2px; height:2px在普通屏上物理像素是 2X2=4,在高清屏上则是(2X2)X(2X2)=16

这一现象带来了图片高清问题：因为图片像素是物理像素，若是以普通屏为标准制图（一倍图）在高清屏上展现会致使放大模糊（1个像素放大为4个），若是以高清屏为标准制图（二倍图）在普通屏上显示会致使缩小（4个像素缩小到1个）。所以完美的办法是UI提供1倍图和2倍图，前端经过代码适配：

1. css media
@media screen and (-webkit-min-device-pixel-ratio: 2) {}
2. img srcset
<img width="100" height="100" src="image100.png" srcset="image200.png 2x,image300.png 3x"/>
复制代码

一样也会带来字体和元素大小的问题，但显然不能再使用媒体查询的方式来适配，适配代码太多了，这时能够引入 flexible 的方式。

flexible的原理就是rem ,rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size标准值的大小。

一般为了兼容第三方插件的样式，咱们想以原始比例显示页面，而且不容许用户修改，因此都会设置页面缩放scale=1，flexible再设置dpr = parseInt(1/scale)=1以下：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

根元素html的font-size标准值 = document.documentElement.clientWidth * dpr / n 这里的n可自由设定，flexible将n定为10，从而使元素大小适配不一样手机屏幕尺寸和dpr

• iPhone3gs: 320px / 10 = 32x
• iPhone6: 375px / 10 = 37.5px

元素经过rem单位来设置，从而实现了屏幕适配。例如设置div width:10rem;在iPhone3gs上表示320px,在iPhone6上表示375px,都实现了铺满屏幕宽度。

最后flexible会监听resize事件从新计算html的font-size flexible仓库

• 单位换算

咱们从设计稿获得的尺寸是px为单位的，若是要换算成rem做单位须要依赖编译器插件，并且会出现小数的状况。因此能够自定义flexible.js文件，将计算font-size标准值的n定为3.75，这样可使得在高清屏中1rem = 100px, 这样只需心算一下就能换算单位了。

• 自动编译

px2rem-loader : webpack加载器，将px换算rem

gulp-px3rem : gulp插件，将px换算rem

参考资料

解惑好文：移动端H5页面高清多屏适配方案

flexible.js如何实现rem自适应