目录如何在vue项目中使用rem布局方法一：使用lib-flexible1.安装包2.引入文件3.根据需要设置rem4.使用rem方法二：使用postcss-pxtorem1.安装包2.创建...
目录
如何在vue项目中使用rem布局方法一：使用lib-Flexible
1. 安装包
2. 引入文件
3. 根据需要设置rem
4.使用rem
方法二：使用postcss-pxtorem
1. 安装包
2. 创建rem.js文件
3. 新建 .postcssrc.js
4. 在main.js中引入
5. 设置body的font-size
6. 可参照流程图
总结
如何在vue项目中使用rem布局
场景：http://www.cppcns.com
在我们开发移动端项目中，实现手机页面布局，需要使用rem布局，那么该如何使用呢？
本文就详细的讲解了在vue项目中使用rem布局的整个过程，可以仔细阅读哦！
方法：
（1）使用lib-flexbile
（2）使用postcss-pxtorem
注意：
两种方法选其一使用哦，避免冲突！! !
方法一：使用lib-flexible
1. 安装包
npm i lib-flexible
2. 引入文件
在main.js（入口）中引入js文件 --- import 'lib-flexible/flexible.js'
3. 根据需要设置rem
在node_modules文件中找flexible设置rem
为了方便可以设置rem为 width / 37.5
相当于1rem=10px
4.使用rem
方法二：使用postcss-pxtorem
1.%20安装包
2.%20创建rem.js文件
在src目录新建rem文件夹（一般情况下可以创建util文件夹），新建rem.js，添加如下代码
3.%20新建%20.postcssrc.js
在项目根目录新建%20.postcssrc.js（注意%20.%20不要忘记加）,添加代码如下:
4.%20在main.js中引入
注意：路径根据自己新建的文件夹为准
5.%20设置body的font-size
6.%20可参照流程图
以上就是vue如何使用rem适配的两种方法
总结
到此javascript这篇关于如何在vue项目中使用rem布局的文章就介绍到这了,更多相关vue项目使用rem布局内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
