怎么在vue中使用rem适配移动端屏幕

本文小编为大家详细介绍"怎么在vue中使用rem适配移动端屏幕"，内容详细，步骤清晰，细节处理妥当，希望这篇"怎么在vue中使用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()}

并引用进main.js文件内

import './rem'

修改.postcssrc.js 文件

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

 "postcss-pxtorem": {  "rootValue": 32,  "propList": ["*"] }

helloworld.vue

效果

补充：下面看下Vue用rem布局

使用vue.js搭建一个移动端项目，怎样做到自适应呢？当然选择rem布局是比较方便快捷的。

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

读到这里，这篇"怎么在vue中使用rem适配移动端屏幕"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。