关于Vue 中使用postcss-pxtorem在移动端开发px自动适应转换rem单位的相关问题。

1、安装postcss-pxtorem依赖包：

npm install postcss-pxtorem -D

2‘、在项目文件中新建一个remTool.js文件：

// 基准大小const baseSize = 32;
// 设置 rem 函数
function setRem() {    
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。   
const scale = document.documentElement.clientWidth / 750;    
// 设置页面根节点字体大小    
document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 2)}px`;}
// 初始化
setRem();
// 改变窗口大小时重新设置 
remwindow.onresize = () => {    
    setRem();
};

3、再新建配置文件postcss.config.js

module.exports = {    
plugins: {        
    autoprefixer: {            
        overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']        
    },        
    "postcss-pxtorem": {            
        rootValue: 16, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem            
        propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']            
        unitPrecision: 5, //保留rem小数点多少位            
        //selectorBlackList: ['.radius'],  //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。            
        mediaQuery: false, //媒体查询( @media screen 之类的)中不生效            
        minPixelValue: 12, //px小于12的不会被转换        
        },    
    },
};
// 蓝湖上设计稿自定义为375px 测量值直接写入即可 若设计稿为750px 则rootValue: 32

4、在项目main.js中引入remTool.js

import './utils/remTool';