postcss-pxtorem

还原设计图时，让px自动转rem。

不在使用手动写一个px转rem的方法，使用插件，简单配置后就可让插件自动转。

postcss-pxtorem 简介在 npmjs里面的链接地址

使用方法

可以查看我github上面的例子链接地址

在utils文件夹下建立了一个rem.js。之后在main.js中引入使用即可。

1. 需要创建一个文件，自动配置一下页面根节点字体大小

   export default function resizeFontsize () {
       (function (win, doc) {
   		function change () {
   		    // 以psd图为375宽时，默认字体大小为 16  750时对应32
   		    // 这样图纸测量多少，直接写就行，不用重新换算
   			doc.documentElement.style.fontSize = 16 * doc.documentElement.clientWidth / 375 + 'px'
   		}
   		change()
   		win.addEventListener('resize', function () {
   			change()
   		}, false)
   	})(window, document)
   }
   

2. 在main.js中引入使用点击查看github例子

   import resizeFontsize from './utils/rem'
   resizeFontsize()
   

3. 需要对postcss-pxtorem 进行一些配置点击查看github例子

   module.exports = {
     "plugins": {
       "postcss-import": {},
       "postcss-url": {},
       // to edit target browsers: use "browserslist" field in package.json
       "autoprefixer": {},
       // 添加的配置选项
       "postcss-pxtorem": {
         "rootValue": 16,
         // 哪些需要进行px转rem
         "propList": ['*'],
         // 排除哪些开头的如 .weui-button 等等
         "selectorBlackList": ['weui-'],
         // 最小转换，如低于 4px的不会进行转成rem
         "minPixelValue": 4
       }
     }
   }
   

4. 最终效果