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

本文介绍: 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();
			});
		}

原文地址:https://blog.csdn.net/sdhshsjh/article/details/135770819

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_60967.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。