JavaScript动态设置rem根元素大小

前端大斗师

于 2021-08-16 15:16:09 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web前端 JavaScript 文章标签：移动端 rem javascript vue 原力计划

本文链接：https://blog.youkuaiyun.com/Web_chicken/article/details/119733496

web前端同时被 2 个专栏收录

79 篇文章

订阅专栏

JavaScript

64 篇文章

订阅专栏

本文介绍了如何在uni-app项目中通过JavaScript动态设置rem根元素大小，实现移动端适配。首先创建rem.js文件，监听窗口resize事件，根据屏幕宽度调整font-size，以375px设计稿为基础。然后在main.js中引入rem.js。示例代码展示了300px宽的元素和3rem宽的元素在页面上的应用，强调了px到rem的转换方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript动态设置rem根元素大小

前言：此方法适用于移动端，部分不同稍加修改即可，核心代码在于获取浏览器宽度，以下为uni-app项目举例。

step 1

// 根目录下新建rem.js 文件名随便起，要有意义

(function(doc, win) {
	var docEl = doc.documentElement,
		resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
		recalc = function() {
			var clientWidth = docEl.clientWidth;
			if (!clientWidth) return;
			docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
		};
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

step 2

// 在main.js中引入
import './rem.js'

step 3

// 测试代码
<view class="first"></view>
<view class="second"></view>

.first{
	width: 300px;
	height:30px;
	border:1px solid #000;
	box-sizing: border-box;
}
.second{
	margin-top: 20px;
	width: 3rem;
	height: 30px;
	border:1px solid #000;
	box-sizing: border-box;
}