【极致丝滑】利用postcss-px2vw-pv完全摆脱编辑器插件，灵活可控地转换px至vw

背景

• 旧的rem适配方案（不管是直接使用rem，仍是配合flexiblejs等lib库进行视口缩放）已经疲态尽显，且随着安卓高清屏的不断出现，同时data-dpr仍有进一步增长的可能性，rem显得并非那么稳固与趁心如意。

• 首先截止至发文日期，viewport的兼容性以下：
  
  能够看到，viewport的兼容性支持已经变得很是好，所以有机会抛弃一切外接库，直接使用原生的viewport。就像最先使用sublime到如今的vscode，都须要从新配置插件px2rem, 换了编辑器，换了环境，开发就会变得很陌生。再加上不一样插件快捷键触发条件也不一样，这就给本来就很煎熬的前端开发又增长了复杂度。好在postcss出现了，它容许咱们用更加完全（相比less和scss而言）的编程思惟或者说面向对象的思惟去对css作预处理。

• 回到px转vw的问题上，解决此问题可使用与postcss官方兼容的插件 postcss-px2vw-pv 解决：

• 官方文档： https://github.com/pomelott/postcss-px2vw-pv

• 此插件使用全新的置换单位pv，没有过多复杂的配置，用postcss自动对各类复杂css样式作计算与转换，而没必要在开发过程当中再考虑各类快捷键、编辑器插件以及转换配置等。

安装

npm i postcss-px2vm-pv -D

yarn add postcss-px2vw-pv --dev

配置选项

选项	类型	默认值	描述
width	number	750	设计稿像素宽度
decimal	number	4	换算后小数点后的保留位数
comment	boolean	true	是否生成插件相关注释

module.exports = {
        plugins: [
            require('postcss-px2vw-pv')
        ]
    }

快速使用

• 首先添加postcss至开发环境中，此处不作赘述，不明白的可上postcss官方查看。
• 例如：

module.exports = {
        plugins: [
            require('postcss-px2vw-pv')({
                  width: 1080
            })
        ]
    }

• 而后对postcss-px2vw-pv进行配置，或使用默认配置项也可。
• 例如一个div的宽度是 ’500px‘， 那么你可使用 ’500pv‘ 进行替换，插件会根据设计稿宽度自动计算并生成新的css样式。

小例子

• 在750宽度的设计稿下， 使用500px的宽度， 10px的横向位移

.box {
        width: 500pv;
        transform: translateX(10pv);
    }

• 生成的最终样式以下：

.box {
        width: 66.666667vw;
        transform: translateX(1.333333vw);
    }