1.在根目录下新建一个untils文件夹,在文件夹里新建rem.js文件
// 如果页面发生改变更改rem得值
function setRem() {
// 默认使用100px作为基准大小
const baseSize = 100;
const baseVal = baseSize / 1920;
const vW = window.innerWidth; // 当前窗口的宽度
const rem = vW * baseVal; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
window.$size = rem / 100;
document.documentElement.style.fontSize = rem + "px";
}
// 初始化
setRem();
// 每次窗口发生改变时窗口大小变化时重置 rem
window.onresize = function () {
setRem();
};
2.在main.js文件中引入
import '@/utils/rem.js'
3.在app.vue里
html,
body {
height: 100%; // 把屏幕撑开
width: 100%;
}
#app {
height: 100%;
width: 100%;
font-size: 0.16rem; // 默认字体大小 0.16rem相当于16px
}