移动端rem适配方案

背景：移动端适配方案有很多，rem方案使用了很久了，一直没有记录，今天记录一下。 

原理：

通过根据屏幕尺寸，成比例改变html的font-size实现适配。

优化：

1.大家好多使用媒体查询改变html的font-size比较死板，遇到一些屏幕不能完美的适配有一点偏差，通过获取设备屏幕尺寸，精准计算，精准适配。

2.平时UI以iphone6为尺寸出设计稿，通过下边方案，1rem即代表设计稿的10px，便于计算编写页面。 

代码：

//动态为根元素设置字体大小
function init () {
    // 获取屏幕宽度
    var width = document.documentElement.clientWidth
    // 设置根元素字体大小。设计稿为iphone6尺寸，1rem为10px，便于计算
    document.documentElement.style.fontSize = width * 10 ／ 375 + 'px'
}

//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)