如果你想让移动终端适应并使用rem，你需要先阅读这篇文章，在vue中配置less来使用LESS，然后你就可以使用rem了

如果项目已经开发的差不多了，用rem代替rem，就应该用这个招数。

postss-pxtorem:用于将px转换为rem的插件

安装postss-pxtorem

npm安装postss-pxtorem-保存

创建新的rem.js文件

Const baseSize=32//Set rem函数setRem () {//当前页面宽度相对于750宽度的缩放比例可以根据自己的需要进行修改。const scale=document.documentelement.clientwidth/750//set页面根节点document . document element . style . font size=(base size * math . min(scale，2)' px ' }//initialize setRem()//reset remwindow。onresize=function () {setrem ()}并将其引用到main.js文件中

“进口”。/rem '

修改postcssrc.js文件

将以下配置添加到。postcssrc.js文件，然后可以直接使用px单元进行开发

postss-pxtorem ' : { ' root value ' : 32，' PropList ' :[' *]} hello world . vue

template div class=' hello ' test/div/template script导出默认值{ name: 'HelloWorld '，data() { return { msg: '欢迎使用您的vue . js App ' } } } }/script style作用域。您好{ text-align : center；font-size : 20px；宽度： 300 px；高度： 400 px；背景：红色；}/样式效果

补充：让我们来看看Vue的rem布局

用vue.js搭建一个移动项目，如何自适应？当然，选择rem布局方便快捷。

使用vue-cli构建项目框架后，向目录结构的index.html文件中添加一段代码：

scriptfnResize()window . onresize=function(){ fnResize()} function fnResize(){ var device width=document . document element . client width | | window . innerwidth if(deviceWidth=750){ deviceWidth=750 } if(deviceWidth=320){ deviceWidth=320 }在document . document element . style . font size=(deviceWidth/7.5)' px ' }/script之后，在编写css时，只需将px单位替换为rem即可，这里设置的比例为100px=1rem。例如，当宽度为100px时，可以直接写成1rem。

摘要

上面提到的是边肖给大家介绍的vue用rem适配手机屏幕，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！