Vue 移动端适配并解决rem影响第三方ui库样式问题

Vue移动端适配并解决rem影响第三方ui库样式问题

一、项目中安装lib-flexible

1 二、在项目的入口main.js文件中引入lib-flexible

1 三、安装postcss-px2rem-exclude

1 四、配置 postcss-px2rem-exclude

1.在项目的根目录下找到文件.postcssrc.js，在里面添加如下代码

五、在项目根目录的index.html中的头部添加如下代码

1 然后重新npm start，打开控制台可以看到代码中的px已经被转成了rem

注意：

1.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem

2.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 / no/就可以了**

为什么要 忽略node_modules目录下的文件？

有时候我们在手机端项目的时候需要导入第三方UI库，例如：vuex,mint ui等，这时你就会发现第三方的组件样式都变小了，变小的主要原因是第三库 css一依据 data-dpr=“1” 时写死的尺寸，我们使用的flexible引入时 data-dpr不是一个写死了的，是一个动态的，就导致这个问题。

原文链接：https://blog.csdn.net/weixin_44602430/article/details/120910483