项目中使用rem的方法

首先建立一个js文件
@/utils/rem

window.onload = function() {

    setRem();

};

window.onreset = function() {

    setRem();

};

/* 设置字体rem */

function setRem() {

    var width = document.body.offsetWidth; // 获取当前页面的宽度

    var nowFont = width / 375 * 37.5; // 通过标签名称来获取元素 

    var htmlFont = document.getElementsByTagName('html')[0]; // 给获取到的元素的字体大小赋值

    htmlFont.style.fontSize = nowFont + "px";

}

在main.js里面引入该文件

import rem from './utils/rem.js'
Vue.use(rem)

之后在页面中就可以使用rem来设置字体的大小了,特别针对移动端的(形式基本相同)。
注:在uni-app开发过程中使用这个,运行不出来,不知道是个人技术原因还是uni-app本身就不适用这个

每次的困难,都是蜕变的开始

posted @ 2021-06-24 10:01  seekHelp  阅读(425)  评论(0编辑  收藏  举报