uniapp 中使用 rem 以及改变窗口动态刷新页面

注意:页面元素需要全部使用 rem 作为单位。

1.使用 uniapp 中的页面属性配置节点,page-meta,注意放在根元素的位置,也就是 template下面的第一层

复制代码
<template>
	<page-meta :root-font-size="fontsize+'px'" user-scalable=no viewport-fit=cover style="display: block;"></page-meta>
    // 下面是要显示的页面
	<view class="bigStyle">
        ......
	</view>
</template>

2.获取屏幕大小以及监听窗口改变事件

复制代码
        onLoad() {
			let srceenNunber = 409.6; // 根据设计稿计算的比例 设计稿宽度/10
			let that = this;

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

				// 重新渲染页面
				uni.$emit('changeRootFontSize', that.fontsize);
			})

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

					// 重新渲染页面
					uni.$emit('changeRootFontSize', that.fontsize);
				}
			})
		},

3. app.vue 页面触发重新渲染页面

复制代码
        created() {
			uni.$on('changeRootFontSize', (newFontSize) => {
				document.documentElement.style.fontSize = newFontSize + 'px';
				this.$forceUpdate();
			});
		}
相关推荐
RainbowSea6 分钟前
6. RabbitMQ 死信队列的详细操作编写
java·消息队列·rabbitmq
RainbowSea13 分钟前
5. RabbitMQ 消息队列中 Exchanges(交换机) 的详细说明
java·消息队列·rabbitmq
LaoZhangAI1 小时前
Claude MCP模型上下文协议详解:AI与外部世界交互的革命性突破【2025最新指南】
前端
LaoZhangAI1 小时前
2025最全Cursor MCP实用指南:15个高效工具彻底提升AI编程体验【实战攻略】
前端
Kagerou2 小时前
vue3基础知识(结合TypeScript)
前端
市民中心的蟋蟀2 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js
李少兄2 小时前
Unirest:优雅的Java HTTP客户端库
java·开发语言·http
逆袭的小黄鸭2 小时前
JavaScript 闭包:强大特性背后的概念、应用与内存考量
前端·javascript·面试
此木|西贝2 小时前
【设计模式】原型模式
java·设计模式·原型模式
carterwu2 小时前
各个大厂是怎么实现组件库和相应扩展的?基础组件、区块、页面
前端