rem适配移动端方案记录

90 阅读1分钟

1.public新建一个js文件夹-用于存放脚本

function rem() {
	//获取屏幕宽度
	let deviceRem = document.documentElement.clientWidth || document.documentElement.scrollWidth;
	//主流移动端屏幕适配-苹果参考-最大为750px,最小为320px
	if (deviceRem >= 750) {
		deviceRem = 750;
	} else if (deviceRem <= 320) {
		deviceRem = 320;
	}
	//使得最大1rem等于100px
	document.documentElement.style.fontSize = deviceRem / 7.5 + 'px';
	//设置body主字体大小
	document.body.style.fontSize = 0.3 + 'rem';
}
//函数调用
rem();
//屏幕尺寸发生改变时候触发-重新调用
window.onresize = function() {
	rem();
};

rem适配01.PNG 2.在index.html文件内dom生成后引入script脚本

rem适配.png