现在配置postcss-px2rem移动端适配的方法大致有几种：
不管用那种方法配置，首先拉取依赖lib-flexible 和 postcss-px2rem 一对，或者lib-flexible 和 postcss-pxtorem 一对，两种配置的依赖是不一样的，要注意。npm拉包默认就给你加到运行依赖里去了，拉开发依赖包时再加上-D。lib-flexible是运行依赖后面那个postcss-px2rem、postcss-pxtorem是开发依赖
然后以下配置方法任选一种使用
1.在postcss.config.js中配置（postcss-pxtorem 版本为^5.1.1）
module.exports = {plugins: {'autoprefixer': {overrideBrowserslist: ["Android 4.1","iOS 7.1","Chrome > 31","ff > 31","ie >= 8"]},'postcss-pxtorem': {rootValue: 37.5,propList: ['*']}}};
2.在vue.config.js中配置（postcss-px2rem）
module.exports={css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({//lib-flexible 将屏幕分成10份(10rem)，这里设置表示设计图宽度为10*37.5=375px// 配置成 37.5 是为了兼容 没有适配 rem 布局的第三方 ui 库remUnit: 37.5})]}}},}
3.其它
配置完成后注意删除掉index.html里的视窗meta标签 <meta name='viewport'> 以便让插件帮你生成。
最后在main.js里引入lib-flexibleimport 'lib-flexible'npm run serve看看吧，原来用px写的css，插件已经帮我们转成rem了，不过注意两种配置的依赖postcss-pxtorem和postcss-px2rem有差别哦。
如果在适配时需要排除一些UI组件库的话可以这么做：
先拉取postcss-px2rem-exclude依赖包
无需上面的配置了，直接在postcss.config.js里作这一个配置即可
module.exports = {plugins: {autoprefixer: {},"postcss-px2rem-exclude": {"remUnit": 75,"exclude": /node_modules/i}}}
这个配置设置屏幕宽度为10rem*75px=750px，原来的box的width='375px’被转换为5rem，并排除了/node_modules下的内容，使UI组件大小不变。
适配PC端也很简单
找到lib-flexible包，注释掉如下的判断条件代码，让其在宽度大于540像素也适用。
function refreshRem(){var width = docEl.getBoundingClientRect().width;// if (width / dpr > 540) {//width = 540 * dpr;// }var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}
不想被转换成rem，将px大写即可
.box{width:200PX;height:200PX;}
如果觉得《vue移动端 PC自适应（配置postcss-px2rem）》对你有帮助，请点赞、收藏，并留下你的观点哦！
