vue项目实现部分页面使用rem_vue项目中使用rem,在入口文件添加内容操作

在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码:

window.onload = function () {

var setRem = function () {

// UI设计稿的宽度

var uiWidth = 1200;

// 移动端屏幕宽度

var winWidth = document.documentElement.clientWidth;

// 比率

var rate = winWidth / uiWidth;

// 设置html元素的字体大小

document.documentElement.style.fontSize = rate * 20 + "px"

};

setRem();

window.onresize = function () {

setRem();

}

}

然后在写css就可以将px单位换成rem.

这里设置的比例是20px=1rem,

例如：宽度为100px时,可以直接写成5rem

(function (doc, win) {

let fn = () => {

let docEl = doc.documentElement,

clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 16 * (clientWidth / 1920) + &