记一次完整的等比例还原设计稿的响应式页面

项目新的迭代周期里面有样式优化的任务，决定借此机会重构页面布局，实现等比例还原设计稿、并响应多种设备的页面，上一版时间比较紧凑，忽略了等比例还原，这次补上。

等比例还原实现思路：

实际像素/实际设备宽度 = 设计稿像素/1920

看到这个公式就知道，需要通过rem来实现了

使用rem就需要设置html的font-size， 根据上面的公式：

var viewport = document.documentElement;
var width = viewport.clientWidth;
var fontSize =100 * width / 1920; // 设计稿字号x实际屏宽/设计稿宽 1rem = 100px  原公式：实际字号/实际屏宽 = 设计字号/设计稿宽
viewport.style.fontSize = fontSize.toFixed(1) + 'px';

这里需要说明一下fontSize的计算公式：为什么要乘以100？

首先要说明的是不一定是100，可以是任何数，在这里我是为了让1rem表示设计稿里面的100px。

其实一开始我不明白为什么要乘以一个数，感觉1rem = 1px不也挺好吗。虽然不明白，还是按照惯例乘以了10，用1rem表示10px，一切看起来都很顺利。

为了保证等比例还原，样式内所有px全部用rem替代，直到页面左右布局发现页面实际比想象中的要宽。调试机器宽度为1366，js计算的fontSize为7px多一点，但页面rem却以8px进行计算的，怎么调都不对。更换1920的调试设备后页面正常显示。

这时候想到是不是设备最小font-size限制问题，1366那台设备将font-size限制在了8px。事实就是这样，不同的设备对最小字号限制也不同，可以参考这篇文章

这时候才意识到乘以100的重要性，要保证各设备正常显示，规避掉最小字号限制，乘以的这个数需要方便计算且尽量大。