module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { viewportWidth: 750, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }, "postcss-viewport-units": {}, } }
viewportWidth是你设计稿的大小750，然后unitPrecision是vw值保留的小数点个数；
五、总结！
首先明白一件事：px就像cm一样，1px永远是1px;1cm永远是1cm；
那么我们从目标再反推一道逻辑：
我们想要的结果很简单: 一个元素的宽度（px) / 屏幕宽度(px) = 定值 （这个定值就是设计稿上面的值比例定值）；
——所以要做就是：屏幕变宽，要让元素宽度就变宽。
然鹅，我们写的代码里面的px是不可能变的（取的750设计稿上面的尺寸）；那么postcss编译出来的rem值也是不变的；
我们是怎么把设计稿里面的40px换算成相应rem的呢；你只要记住根字体大小的值（浏览器的默认是16px，现在设置成的32px)就是1rem；这交给工具同一去算；
得到：元素的宽度(px) = 元素的宽度（rem) :heavy_multiplication_x:32; 所以这个32是你必须要设置在postcss-pxtorem里面的；这样它就可以帮你算；
又因为： 元素的宽度(rem) :heavy_multiplication_x: 根字体大小（px) = 元素的宽度（px)
元素的宽度（px) 变大， 元素的宽度(rem) 不变，那就只有改变根字体大小（px) ，变大；具体怎么变，上面的js代码已经解释了；
——所以我们做的就是：屏幕变宽，让根字体大小（px) 变宽，元素宽度就变宽。
750屏幕下是写的样式大小是1:1, 所以
又因为我们想要：根字体大小（px) / 屏幕宽度(px) = 32 / 750
所以： 根字体大小（px) = 32 / 750 :heavy_multiplication_x: 屏幕宽度(px)
一个元素的宽度（px) / 屏幕宽度(px) = 定值
→ 根字体大小（px) :heavy_multiplication_x:元素的宽度（rem）/ 屏幕宽度(px)
→ 32 / 750 :heavy_multiplication_x: 屏幕宽度(px) :heavy_multiplication_x:元素的宽度（rem）/ 屏幕宽度(px) 等于什么？？
得到的的是一个与屏幕大小无关的定值！
化简： 元素的宽度（rem）:heavy_multiplication_x:32 / 750 = 元素的宽度（px) / 750 ——不就是设计稿上面的比例么！！！
验证以上操作出来的结果是否符合预期也很简单：
比如一个img的宽，高，在iphone6上的尺寸（审查元素的大小！px单位）：
根字体:16px; postcss算出来的rem值是2.5rem; 2.5
16=40px; 实际上也是40px;
——得到元素实际大小 40:heavy_multiplication_x:40（px), 屏宽是375；比例是40/375=0.10667;
在iphone5上的尺寸（审查元素的大小！px单位）：
13.6533=34.13px; 实际上也是34.13px;
——得到元素实际大小 34.13:heavy_multiplication_x:34.13（px), 屏宽是320；比例是34.13/320=0.10665;
2，自己项目适配配置(实践)
上的文章讲的理论和方法是可行的，自己项目的解决方案和他大同小异（主要用rem）：
1，插件：amfe-flexible + postcss-px2rem
amfe-flexible：自动根据不同设备改变data-dpr的值，这样就可以根据不同的data-dpr设置字体大小不变，仅放大相应倍数。
postcss-px2rem：打包的时候把项目里面的px统一转换成rem，转换的基准值根据配置设置的（.postcssrc.js）
/ 因为我是以750px(iphone6)宽度为基准，所以remUnit为37.5 /
经过试验结果：
postcss-px2rem：只负责把项目里面的px按照基准值转换成rem，并不负责根节点动态font-size的计算。
例如，代码里面有个高度固定：180px， 基准值是：37.5， 那最后界面上的rem=180/37.5=4.8rem
不管换不同客户端手机，不同分辨率，界面上都是固定4.8rem【rem的值是固定的，根据根节点的font-size不同，在界面显示的px也不同】，界面上显示的px = 16（没有设置font-size的话默认是16px）* 4.8rem = 76.8px
【那么这个基准值：37.5怎么来的：
rem基准值计算
关于rem的基准值,也就是上面那个37.5px其实是根据我们所拿到的视觉稿来决定的,主要有以下几点原因: