工作中的项目引用的是淘宝的flexible自适应布局，设置根元素的font-size大小的逻辑如下：
基础知识
之前有些适配做法，是通过js动态计算viewport的缩放值（initial-scale）。
例如以屏幕320像素为基准，设置1，那屏幕375像素就是375/320=1.18以此类推。
但直接这样强制页面缩放过于粗暴，会导致页面图片文字失真模糊。
Px是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素，这就避开了很多层级关系。移动端新型浏览器对rem的兼容很好，可以放心使用。
淘宝的flexible做了什么
rem的值是相对于根元素的font-size来设置的，1rem是相对于根元素的font-size，那根元素的font-size是怎么来设置的呢？
meta标签的解释
首先去取viewport的meta标签，
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover" />
页面viewport：它在页面中设置，是对应手机模式访问网站，网页对屏幕而做的一些设置。通常手机浏览器打开页面后，会把页面放在一个虚拟的‘窗口’-这个比窗口大，也就是你常发现页面可以进行拖动，放大缩小，这个窗口即viewport，meta的这个viewport属性基本所有手机浏览器皆支持。
viewport属性各个参数，如实例：
width：#viewport的宽度，可以指定为一个像素值，如600，或者为特殊的值，如：device-width （设备的宽度）。
height：#viewport的高度。
initial-scale：#初始缩放比例，即当浏览器第一次加载页面时的缩放比例。
maximum-scale：#允许浏览者缩放到的最大比例，一般设为1.0。
minimum-scale：#允许浏览者缩放到的最小比例，一般设为1.0。
user-scalable：#浏览者是否可以手动缩放，yes或no。
如何设置HTML的大小
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 540 * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
获取当前窗口的宽度，除以dpr，如果大于540，则直接*dpe,说明是PC端，此时width=width*2，而html的font-size的大小，则设置为font-size设为设备宽度/10，做到了根据设备的不同，设置不同的HTML的font-size。
