样式 rpx 单位转换

    为了提升开发效率，避免人工做这个转换，可以通过 postcss 的 px2rpx 插件来自动完成像素单位的转换。

    • 在构建配置里增加样式处理规则
    • 指定 postcss 处理器的处理选项：增加 px2rpx 转换插件
    • 从 0.4 版本开始，可以在全局配置 designWidth 属性，无需在插件 px2rpx 里配置，如果配置了会覆盖外部配置的值，之所以提取到外部，由于快应用也依赖这个信息配置，但其单位依旧保留 px 不需要转换。
    • 从 0.4.6 版本开始，支持 设置 1px 不转，即设置 noTrans1px: true，将开启 1px 不转，默认为：false
    1. {
    2.     processors: {
    3.         postcss: {
    4.             extnames: ['styl'],
    5.             options: {
    6.                 plugins: {
    7.                     px2rpx: {
    9.                         designWidth: 1242,
    10.                         // 开启 1px 不转
    11.                         noTrans1px: true,
    12.                         // 保留的小数点单位, 默认为 2
    13.                         precision: 2
    14.                         // 保持 不转 px 的注释值，默认: px2rpx: no
    15.                         // keepComment: 'px2rpx: no'
    16.                 }
    17.             }
    18.         }
    19.     }
    20. }

    px2rpx 插件说明

    • 参数说明：
      • designWidth: 设计稿的宽度，开发过程中可以直接根据实际的视觉稿的像素宽度进行设置即可
      • precision: 转成 rpx 单位保留的小数点后的位数，可选，默认为 2
      • keepComment: 保持某些 px 不转为 rpx 的注释内容， 可选，默认为 px2rpx: no
    • px 不转 rpx 说明:

    默认不做任何说明的话，px 将会根据配置参数转为对应的 rpx 取值；
    若希望某些样式不进行转换，如：1px、2px 、3px 等，需单独在要转的样式后添加 /*px2rpx: no*/ 注释；

    1. // 开发样式定义
    2. // 视觉稿宽度为：`1242px`
    3. .my-btn {
    4.     border: 1px solid #fff; /* px2rpx: no */
    6.     /* px2rpx: no */
    7.     width: 822px;
    8.     height: 150px; /* px2rpx: no */
    9. }
    11. // 经过 px2rpx 插件转换后样式为
    12.     border: 1px solid #fff;
    13.     border-radius: 3px;
    14.     width: 496.38rpx;
    15.     height: 150px;
    16. }

    还可通过 设置 keepComment 自由配置强制不转px的注释文案；

    1. // 开发样式定义
    2. // 视觉稿宽度为：`1242px`
    3. .my-btn {
    4.     border: 1px solid #fff; /* no */
    5.     border-radius: 3px;
    6.     /* no */
    7.     width: 822px;
    8.     height: 150px; /* no */
    9. }
    11. // 经过 px2rpx 插件转换后样式为
    12. .my-btn {
    13.     border: 1px solid #fff;
    14.     border-radius: 3px;
    15.     width: 496.38rpx;