uni-app使用rem单位布局

￡神魔★判官ぃ 2023-01-15 11:29 190阅读 0赞

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

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

<template>
    	<view class="indexBody">
    		<page-meta :root-font-size="fontsize+'px'"></page-meta>		
    		
    	</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);
    				}
    			})
    		},
    	}

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

[page-meta]: https://uniapp.dcloud.io/component/page-meta

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 中使用rem布局

vue 中使用rem布局在用vue或react等工具搭建一个移动端项目时,怎样做到自适应呢? 当然选择rem布局比较方便快捷. 此处已vue为例,在使用vue-cl

￡神魔★判官ぃ/ 2023年02月22日 05:21/ 0 赞/ 3 阅读

相关 uni-app使用rem单位布局

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

￡神魔★判官ぃ/ 2023年01月15日 11:29/ 0 赞/ 191 阅读

相关 Vue.js 中自动将 px 单位转换为 rem 单位，构建响应式布局

step1. 安装 lib-flexible 插件 >> npm install lib-flexible --save step2. 安装 postcss-pxt

男娘i/ 2022年12月27日 02:21/ 0 赞/ 93 阅读

相关使用相对长度单位rem布局网页内容

![format_png][] ![format_png 1][] 前言：上篇我们提到了相对单位em的用法，知道了em的概念，即是一个相对的单位，也知道了em的值不是固定的

我会带着你远行/ 2022年12月25日 02:52/ 0 赞/ 98 阅读

相关 css rem 单位_了解和使用CSS中的rem单位

css rem 单位 Gain an in-depth understanding of rem units in CSS, a relative sizing unit w

叁歲伎倆/ 2022年12月03日 01:39/ 0 赞/ 260 阅读

相关移动端使用rem布局-案例

在页面引入这段js代码 (function (doc, win) { var docEl = doc.documentElement,

我就是我/ 2022年10月11日 00:41/ 0 赞/ 207 阅读

相关 rem 单位和 em 单位

首先要知道：rem 和 em 是相对单位；我们通过代码来看 rem 和 em的使用和区别： em:相对于父级 <!doctype html>

灰太狼/ 2022年05月30日 10:45/ 0 赞/ 255 阅读

相关 css - 布局 - rem布局

物理像素物理像素是屏幕设备的尺寸单位，在不同的设备中1px里可以容纳的像素颗粒是不相同的，所以1px这个单位其实也是有N个像素颗粒填充的。同一尺寸屏幕的每个像素点所能容

淩亂°似流年/ 2022年01月05日 22:11/ 0 赞/ 424 阅读

相关 rem单位

rem单位 rem是css中的一个尺寸单位,和px、%,em(相对于父元素的字体大小)单位一样都是设置大小 rem:html字体大小的多少

绝地灬酷狼/ 2021年07月24日 22:02/ 0 赞/ 622 阅读

相关 rem布局

原理:通过修改html根元素的大小,使得整体元素大小使得改变 1、创建js文件 (function(){ func

我就是我/ 2021年07月24日 11:05/ 0 赞/ 449 阅读