起始的项目并且没有做多设备适配，因为是配套硬件开发，后面为了集成支付宝刷脸付，需要在特定的硬件上运行，所以临时做了rem适配。今天也重新翻阅了下移动端适配资料，就此记录下。
rem是一个相对单位，其参考值是根元素的font-size，默认1rem=16px，所以只需要动态改变根元素的font-size，即可简单的适配大部分的移动端。
首先需要在index.html中加入如下meta视口标签：
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1
,maximum-scale=1,minimum-scale=1, user-scalable=no"/>
主要是将布局视口与理想视口的尺寸统一，也就是将web的布局范围限制在手机屏幕的可视范围，不至于需要左右滑动才能看全布局。initial-scale=1,maximum-scale=1,minimum-scale=1, user-scalable=no则是控制网页缩放，分别表示：初始缩放比例、最大缩放比例、最小缩放比例、是否允许缩放。（这些属性在IOS中无效。。。）
然后是
- 根据设计稿，定义一个基准值，一般来说都是iphone6的设计稿，即应该是
750px像素，当然也不排除像我这种奇葩的1080px; - 通过
window.screen.width获取设备的理想视口大小; - 用理想视口大小/基准值*100，即为
font-size的px尺寸；
举个例子，目前项目的设计稿是在1080像素下绘制的（为什么是1080？因为开始根本没考虑适配的问题），所以以1080为例：
// 根据不同设备的理想视口宽度动态设置根元素的`font-size`。
let idealViewWidth = window.screen.width;
const BASICVALUE = 1080;
document.documentElement.style.fontSize = (idealViewWidth / BASICVALUE) * 100 + 'px';
在1080px下，根元素的font-size则为100px，所以1rem=100px，原设计稿的px尺寸只需要除以100就能转成rem，简单方便。
iPhone6的375尺寸下，font-size则为34.7222px，1rem=34.7222px。
至此，简单的适配就已经完成。
但是，问题还不仅仅于此，如此简单粗暴的适配，会导致大屏设备字体过大或者小屏设备字体过小的问题。如果适配要求较高，推荐比较大众比较通用的手淘flexible适配方案。
以后再尝试vw适配方案及flexible，并补充记录。
