uni-app使用rem单位布局

问题描述：一般使用uni-app是开发移动端，但是根据需求需要开发pc端又想用uni-app的技术，pc端使用rpx会出现不兼容，所有使用rem布局；

解决思路：uni-app提供了可以设置html标签字体的组件 page-meta 可以动态渲染html字体大小从而实现响应式布局,组件详情请看官方文档：https://uniapp.dcloud.io/component/page-meta

<template>
	<view class="indexBody">
		<page-meta :root-font-size="fontsize+'px'"></page-meta>		<!--动态设置html字体大小-->
		<!--在此处布局-->
	</view>
</template>

布局就可以直接使用rem了

export default {
		data() {
			return {
				title: 'Hello',
				fontsize:12,
			}
		},
		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);
				}
			})
		},
	}

希望此文章能够帮助您，欢迎评论区留言提问，转载请附属原文链接