想在移动端适配并使用rem，您需要先配置好less，在Vue中使用less，就可以使用rem了；

如果项目已经开发的差不多了没用用到rem又要使用rem，这一招就够了；

postcss-pxtorm:转换px为rem的插件；

一、安装postcss-pxtorem

npm install postcss-pxtorem --save

二、新建rem.js文件

const baseSize = 32

// 设置 rem 函数

function setRem () {

// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。

const scale = document.documentElement.clientWidth / 750

// 设置页面根节点字体大小

document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'

}

// 初始化

setRem()

// 改变窗口大小时重新设置 rem

window.onresize = function () {

setRem()

}

注：如果在pc端使用把750改成1920就可以使用；这个数字是ui设计图的宽度；

三、在main.js文件中引用

import './rem'

四、修改.postcssrc.js文件

在.postcssrc.js文件内的 plugins中添加一下配置。陪之后就可以在开发中直接使用px单位直接开发；

"postcss-pxtorem": {

"rootValue": 32,

"propList": ["*"]

}

实例：

<template>

<div class="hello">

test

</div>

</template>

<script>

export default {

name: 'HelloWorld',

data() {

return {

msg: 'Welcome to Your Vue.js App'

}

}

}

</script>

<style scoped>

.hello {

text-align: center;

font-size: 20px;

width: 300px;

height: 400px;

background:red;

}

</style>

效果：

注：如果您有更好发方法可以留言或发私信，相互学习讨论