移动端适配方案

舍弃flexible.js,使用vw+rem进行适配

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。(来自lib-flexible团队)

vw+rem适配

• 要点：移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制
• 场景：rem页面布局(不兼容低版本移动端系统)
• 兼容：vw、calc()

	/* 基于UI width=750px DPR=2的页面 */
	html {
	    font-size: calc(100vw / 7.5);
	}

什么是vw和vh?

vw : 1vw 等于视口宽度的1%
vh : 1vh 等于视口高度的1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个

如何使用

用视口单位度量，视口宽度为100vw，高度为100vh

例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）

注意：这里的1%是指占视口的1%，而不是我们定义的div的1%

如何利用rem+vw进行屏幕适配呢？我们以设计稿为750px为基准

第一步：设置meta标签

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

因为iPhone6以及大多数的dpr为2,为了第二步的方便进行换算

第二步：设置html的font-size大小

html{font-size:13.33333333vw}

为什么font-size=13.33333333vw?

下面分析下原理吧, 上面我们说了vw表示1%的屏幕宽度,而我们的设计稿通常是750px的,屏幕一共是100vw,对应750px,那么1px就是0.1333333vw,。

所以，我们让1rem=100px=13.333333vw

div {
  width: 1.7rem;
  height:1.37rem;
}

但是注意，这是针对于dpr=2的适配，至于其他dpr适配，要根据设计师的设计稿规定
1）如果你的设计图是640px或者750px，那么dpr的取值就是2,meta如下设置

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

2）如果你的设计图是1080px,那么css像素就是1080px,那么dpr的取值就是3,这个时候，meta要如下设置

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

然后rem的计算方法和dpr=2时一样。