关键词：lib-flexible，postcss-px2rem

1.依次下载上面两个依赖包

npm i lib-flexible --save
npm i postcss-px2rem --save-dev

2.在vue.config.js配置使其生效

module.exports = {
    ...
    css: {
        loaderOptions: {
            plugins: [
    			require('postcss-px2rem')({
    			    // 设计稿的宽度/100
    				remUnit: 75
    			})
    		]
        }
    }
}

如此就集成完毕了，接下来就可以照着设计小姐姐给的UI稿愉快的写px了，是多少px就写多少px。

查看效果

如图：html上已经动态设置了font-size，改变屏幕大小font-size的值也会跟着改变；设置宽度30px也已经自动转换rem了。

3.拓展问题1：引入第三方组件库如vantUI，组件样式变小？

首先引入vantUI，随便先找个button组件看看效果

可以看到，黄色按钮变小了，怎么跟文档的示例看起来差距这么大呢？

查看元素可以发现是因为button的px被我们转为rem而导致的，如何解决这个问题？回过头看看上面我们在vue.config.js设置的remUnit值，为了方便开发，通常我们会设置为设计稿宽度/100，即750/100=75，这样可以进行1:1的还原开发，设计稿标注的是40px我可以直接照着写40px

但vantUI的设计稿不是750而是375，所以当我们以75为基准值进行开发时，自然就会造成vantUI所有组件样式都变小。

知道了原因，现在我们只需把remUnit设置为37.5即可适配vanUI，而对于我们自己的设计稿由于是750的，这时只需把得到的标注值/2即可，例如一个盒子的宽高是40x40，那我们将其设置为20x20即可（或者让设计师输入375的设计稿，这样就不用除以2了），这样我们自己写的样式和第三方组件的样式都能保持一致的效果。

4.拓展问题2：如何不让第三方组件库不转换为rem单位，依旧使用px做为单位？

如果只希望自己写的样式转为rem，而项目中使用的其他组件库依旧使用px做为单位，可以使用postcss-px2rem-exclude实现

npm i postcss-px2rem-exclude --save-dev

修改配置

// 注释掉原有的postcss-px2rem
// require('postcss-px2rem')({
// 	remUnit: 37.5
// })
require('postcss-px2rem-exclude')({
	remUnit: 37.5,
	// 忽略vant
	exclude: /node_modules|vant/i
})

可以看到vant的样式保持px，而我们自己的样式会转为rem。

5.拓展问题3：如何让部分样式保留px，不转换为rem？

如果你希望部分样式依旧使用px做为单位，例如font-size，可以通过在样式后面追加/no/来达到目的。

可以看到fs-lg-big这个类名依旧使用px做为单位。

ps：笔者发现，在生产环境下/no/并没有生效，依旧会被转为rem，笔者通过使用大写PX的方式让其不转为rem，如果你知道该问题的原因或者有更好的解决方法，欢迎在评论区交流！

vue-cli3.0+集成rem，实现移动端自适应