uniapp的rpx在style的css变量中不转换？

Question

uniapp中使用css变量和rpx单位，rpx不会进行转换，代码如下：

<view class="com" style="--size: 400rpx">
  <view class="bg" :style="bgStyle">
  </view>
</view>

size还是显示为rpx，不会转换为px，该如何解决？

Answer 1

1. js方法
   使用upx2px即可,文档中有详细代码

2. css方法

   <view class="com" style="--size: 400"></view>

    .com{
      --size-rpx: calc(var(--size, 400) * 1rpx);
      width: var(--size-rpx);
      height: var(--size-rpx);
    }

Answer 2

    <!-- 计算设备的 2rpx 约等于多少 px，根据需要可以挂在根元素上 -->
    <!-- 若不需要 --window-margin 时，可以简写为：calc(100vw / 375) -->
    <view style="--rpx: calc(calc(100vw - 2 * var(--window-margin)) / 375)">
      <!-- 花括号内的数值可以传变量，单位 px，相对于上面的 375 -->
      <view :style="{
        '--size': `calc(${400 / 2} * var(--rpx))`
      }">
      </view>
    </view>