uniapp动态计算rem适配不同尺寸的机型

原理
在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。

举个实际的例子。设计师交付的设计稿宽度是750px，设计稿上一个div的标注尺寸是375px（宽度是设计稿宽度的一半）。我们可以

设置html的font-size 为 100屏幕宽度/设计稿宽度
在写CSS时设置 div 的宽度是 3.75rem （计算时用设计稿标注值除以100），边框宽度为1px
假设用户在逻辑像素宽度是375px的设备上打开页面，则html的font-size是100375/750 = 50px，div的宽度是3.75rem ，即187.5px 正好是屏幕宽度的一半。

假设用户在逻辑像素宽度是428px的设备上打开页面，则html的font-size是100*428/750 = 57.07px，div的宽度是3.75rem ，即214px 正好是屏幕宽度的一半。

为什么要用100来乘以屏幕宽度/设计稿宽度？其实100只是随便选取的一个值，我们也可以随便其他任意值比如50。如果选100，设计稿中某个元素标注的尺寸是375px，我们可以很快速的计算出3.75rem。如果html的font-size 设置为 50*屏幕宽度/设计稿宽度，那么div的宽度就应该是7.5rem了。换算起来就没那么直观了。
实现
首先在你的page页面.vue文件
1.使用page-meta组件作为根节点 需要加入display：block 否则不显示

<page-meta :root-font-size="fontsize+'px'" style="display: block;"></page-meta>

2.在onload中写入

onLoad() {
        let designWidth = 750; //因设计图的宽度
        let that = this;
        //窗体改变大小触发事件
        uni.onWindowResize(res => {
            console.log('变化后的窗口宽度=', res.size.windowWidth);
            //100*屏幕宽度/设计稿宽度
            that.fontsize = Math.floor((100 * res.size.windowWidth) / designWidth);
            console.log('字体大小：', that.fontsize);
        });

        //打开获取屏幕大小
        uni.getSystemInfo({
            success(res) {
                console.log('设备信息：', res);
                that.fontsize = Math.floor((100 * res.screenWidth) / designWidth);
                console.log('字体大小：', that.fontsize);
            }
        });
    },