.about{width:750px;高度：100vh；框大小：边框框；背景色：蓝色！重要；.kk{宽度：350px；高度：350px；背景色：红色；}}1.开发环境vue2。电脑系统windows10专业版3.在使用vue开发移动端的过程中，我们会因为兼容性问题而头疼。下面分享分享下vue使用rem的自适应，希望对大家有所帮助。4.废话不多说，直接进入操作：//installpostcss-pxtoremnpmipostcss-pxtorem-S5。在src目录下新建rem文件夹，在下面新建rem.js，添加如下代码://basesizeconstbaseSize=37.5//设置rem函数functionsetRem(){constsalepro=document.documentElement.clientWidth/750//当前页面宽度相对于750宽度的缩放比例，可以根据需要修改。//设置页面根节点的字体大小document.documentElement.style.fontSize=(baseSize*Math.min(salepro,2))+'px'}//初始化setRem()//重置remwindow.onresize=函数(){setRem()}6.在项目根目录新建.postcssrc.js，添加如下代码：module.exports={"plugins":{"postcss-pxtorem":{"rootValue":37.5,"propList":["*"]注意：在我的配置中，比例是1:1，即设计宽度为750px，可以直接写width:750px;在css中，不需要转换，是不是很棒？7.在main.js中引入import'@/rem/rem.js'8.在vue模板中使用，在css中添加如下代码：.about{width:750px;高度：100vh；框大小：边框框；背景色：蓝色！重要；.kk{宽度：350px；高度：350px；背景色：红色；}}9.效果图如下：10、本次长篇分享到此结束，希望对大家有所帮助，让我们一起努力，一起攀登高峰。
