步骤如下
第一步:
在项目根目录下中找到src文件夹,在src文件下中找到assets文件夹,
在assets文件夹下新建一个js文件夹,在js文件新建一个rem.js
第二步:
在rem.js中写入以下代码:
(function (draftWidth, n) {
function getRem() {
var html = document.querySelector("html");
var w = document.body.clientWidth || document.documentElement.clientWidth;
var rem = (w / draftWidth) * n;
// html.style.fontSize = rem + "px";
//982:平板尺寸
//适配pc端自适应缩放
if (w > 982) {
html.style.fontSize = 85 + "px";
} else {
html.style.fontSize = rem + "px";
}
}
getRem();
window.addEventListener("resize", function () {
getRem();
});
})(1920, 100);
第三步:
在项目根目录下找到main.js,
在main.js中引入rem.js
加入以下代码
import '@/asses/js/rem.js'
第四步:
在需要用到fone-size的页面,里面进行px转换成rem
转换 》》》 1px = .1rem (100转换)
(设计图 1px=.1rem/1920px = 19.2rem)