问题描述

uniapp 项目中使用rem 进行PC和app端的适配

解决方案：

1.使用page-meta组件作为根节点 需要加入display：block 否则不显示

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

2.在onload中写入

        onLoad() {
            let srceenNunber = 19.2; //因设计图是1920所有把设计图分为19.2份，所以html字体大小为100px
            let that = this;

            //窗体改变大小触发事件
            uni.onWindowResize((res) => {
                console.log('变化后的窗口宽度=', res.size.windowWidth);
                that.fontsize = parseFloat(res.size.windowWidth) / srceenNunber;
            })

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