JavaScript动态设置rem根元素大小

Posted 2021-09-06 Web_chicken

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;
}

上图为两个宽高一样的长方形。

注意的是，我们设计图一般按照375px设计，所以只需要在对应的逻辑像素px/100就是我们所需要的rem值。