单页面引进rem

最新推荐文章于 2023-09-19 17:01:20 发布

原创最新推荐文章于 2023-09-19 17:01:20 发布 · 485 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #html5 #vue #dom

本文介绍了如何通过编写自定义JS脚本动态计算根字体大小，并结合pxtorem插件，实现单页面应用中REM布局的适配方案。详细步骤包括创建JS文件设置窗口 resize 事件监听，以及pxtorem插件的配置方法。

单页面实现rem比vue引进rem复杂一点点
1，先创建文件自己写的js

(function(){
	var calc = function(){
		var rem = document.documentElement.clientWidth/10;
		document.documentElement.style.fontSize = rem + 'px';
		rem = document.documentElement.clientWidth > 750?37.5:rem;
		console.log(rem);
	}
	calc();
	window.addEventListener('resize',calc);
})();

然后在页面引进
然后下载一个软件px to rem & rpx
设置如下
在这里插入图片描述
然后就用rem的单位就行了