标签：插件 丝滑 px width vw pv postcss px2vw

背景

• 旧的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

配置选项

    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);
    }

标签：插件,丝滑,px,width,vw,pv,postcss,px2vw
来源： https://www.cnblogs.com/pomelott/p/13648495.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。