首先封装一个方法来实现rem
function Rem() {
// 表示1920的设计图,使用100PX的默认值
var whdef = 100 / 1920;
// 当前窗口的宽度
var bodyWidth = document.body.clientWidth;
// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
var rem = bodyWidth * whdef;
document.getElementsByTagName('html')[0].style.fontSize = rem + 'px';
}
window.addEventListener('load', Rem);
window.addEventListener('resize', Rem)
这里的1920可以根据实际情况修改。
然后在vue里面使用
把它放在入口页面中全局使用就行了
<script>
export default {
mounted() {
Rem();
}
}
</script>