移动端rem响应式解决方案

一、设置meta标签

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

上述meta标签的每一个属性的详细介绍如下：

属性名	取值	描述
width	正整数	定义布局视口的宽度，单位为像素
height	正整数	定义布局视口的高度，单位为像素，很少使用
initial-scale	[0,10]	初始缩放比例，1表示不缩放
minimum-scale	[0,10]	最小缩放比例
maximum-scale	[0,10]	最大缩放比例
user-scalable	yes／no	是否允许手动缩放页面，默认值为yes

二、设置rem单位
rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size。
默认情况下，html元素的font-size为16px，所以：

1rem = 16px

为了计算方便，通常可以将html的font-size设置成：

html{ font-size: 62.5%; }

这种情况下：

1rem = 10px

// 设置响应式字体大小为26px
<div style="font-size: 2.6rem;">你好</div>

三、通过rem来实现响应式布局
rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。
因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。

(function(doc, win) {
    const docEl= doc.documentElement
    refreshRem = function() {
        let deviceWidth = docEl.clientWidth
        // dw为设计稿宽度
        const dw = 640
        // 当前屏幕大于设计稿宽度
        if (deviceWidth > dw) {
          deviceWidth = dw
        }
        const rem = deviceWidth / dw * 10
        docEl.style.fontSize = rem + 'px'
    }
    // 初始化
    refreshRem()
    // 监听屏幕大小变化
    win.addEventListener('resize', refreshRem, false)
})(document, window)