postcss-pxtorem设置最小转换值

背景

一般移动端的UI都是二倍图，对于边框常设置为border: 1px solid；这样在转换的时候，1px在真机渲染的时候就只有0.5px，在真机上会出现边框过细、显示不完整的问题

 

解决方案

配置postcss-pxtorem的minPixelValue属性

css: {
    loaderOptions: {
        postcss: {
            plugins: [
              require('postcss-pxtorem')({
                rootValue: 75,
                propList: ['*'],
                minPixelValue: 2 // 最小px为2，如果设置1px则不转rem
              })
            ]
        }
    }
}

效果

代码里写了1px，在浏览器渲染的也是1px（红色箭头部分）

代码里超过1px，在浏览器渲染就转换为了rem（绿色箭头部分）