采用Rem适配大屏

需要为大屏在不同的设备上进行查看，但是在需求中有很多布局需要去设置具体的像素值，如果采用通常的百分比布局，无法满足需求，这个时候想到了移动端布局的解决方案rem.

rem是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

我们可以通过动态计算html跟标签的font-size大小来实现大屏的适配，具体实现代码如下：

const baseNumber = 100; // 获取相对好计算的基数

/**
 * 设置html节点fontSize值得大小，需要动态计算
 * @param {*} designWidth 设计稿大小
 */
export function setHtmlFontSize(designWidth = 1920) { // 设计稿宽度为1920，利用移动端rem的适配方案，动态修改html的值
    const clientWidth = document.documentElement.clientWidth;

    // 选取的是 1920 ， * 100是为了防止浏览器默认行为，如果小于12px默认会处理为12px进行计算。在css中一定要除以100.
    var fontSize = clientWidth / (designWidth) * baseNumber; // 计算完毕后，在设计稿上量出的尺寸直接写入，只是把px换成rem即可，其他内部需要动态设置为px的可以乘这个基数（size * fontSize / 100 + 'px'）
    var elHtml = document.getElementsByTagName('html')[0];

    // elHtml.style.fontSize = (fontSize > 80 ? 80 : fontSize < 50 ? 50 : fontSize) + 'px'; // 规定上限在80px，下限在50px，上下限值根据需求进行调整，也可以不进行调整。
    elHtml.style.fontSize = fontSize + 'px';
}

/**
 * 获取当前的实际像素
 */
export function getUnitRem(px) {
    if (typeof px === 'string') px = parseFloat(px);
    return (isNaN(px) ? 0 : px / baseNumber) + 'rem';
}