前言
最近学习了很多新东西，所以迫不及待的想分享给大家，知道此技术的同学可以不用看哦，此篇文章主要针对第一次了解此技术的同学，俗话说 最好的学习方法就是教会他人 ，所以我希望能跟大家一起学习，一起成长！
1. 安装与使用lib-flexible
1.1 lib-flexible的作用
lib-flexible是淘宝项目组开发出来的一个插件，它会根据屏幕大小为页面自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。让我们可以根据设计图的px尺寸计算相应的rem值，从而使得页面根据屏幕大小自动适配。
1.2 lib-flexible的安装与使用
npm install lib-flexible --save
安装完成后，在项目的入口main.js文件中引入lib-flexible
import 'lib-flexible'
1.3 注意事项
由于lib-flexible会动态给页面header中添加meta标签，所以最好把目录 public/index.html 中的这个标签删除或注释！
1.4 完成效果
此时我们会发现html标签上多了个style属性，这个值就是屏幕的动态缩放比，它会随着屏幕的尺寸变换而动态的变换。
2. 安装与使用postcss-px2rem
2.1 postcss-px2rem的作用
postcss-px2rem会将你写的px值转换为对应的rem，rem单位用于适配不同宽度的屏幕，它是根据标签的font-size值来计算出结果的，1rem=html标签的font-size值。
2.2 postcss-px2rem的安装与使用
npm install postcss-px2rem --save-dev
安装完成后，在vue.config.js（项目创建完初始是没有这个js文件的，需要自己手动创建）中配置如下代码：
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 75 //只需要改此处的数值
})
]
}
},
}
}
上述代码中你只需要改一处地方即可，即remUnit的值。remUnit这个配置项的数值是根据设计图来定这个值，假如设计图给的宽度是750，那我们就会把remUnit设置为75（设计图宽度的十分之一），如果是375，那就写37.5。
配置完成后，我们就可以直接根据设计图上的px值进行正常开发了，设计图上的px值是多少，代码里就写多少。 完成后的效果如下图：
我们可以发现，随着屏幕的尺寸变化，该图片元素的大小也随之发生了变化，但是相对应得rem值是没有发生改变的，因为rem值是根据html根元素的font-size值来动态计算的，也是相对单位，所以不会发生改变。
3. 如何解决第三方组件库样式冲突问题
当我们引入第三方组件库时，会发现组件的样式受到了影响，所有组件的单位都变成了rem，组件也会随着屏幕大小改变而改变，那是因为第三方组件库没有兼容px2rem，如果这正是我们所希望的，那就不需要做任何操作即可正常使用；但一般而言，我们都不希望组件库中的样式会受到影响。
解决方案如下：
一、将之前vue.config.js中配置的postcss-px2rem代码块注释掉
二、安装postcss-px2rem-exclude
npm install postcss-px2rem-exclude --save
三、在根目录下新建 postcss.config.js 文件，然后配置以下代码
module.exports = {
plugins: {
autoprefixer: {},
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules|folder_name/i
}
}
}
此插件的功能是为了排除 node_modules 中的所有第三方插件，所以第三方组件库的样式就不会被受到影响。
以上就是全部内容，此方法能让我们在开发移动端应用程序变得更加方便与快捷，自己动手试试吧！
