小程序，由于同一个小程序分别有移动端和PC端页面。

为了解决元素的CSS尺寸适应问题，我希望移动端用rpx单位，PC端用px单位。

我采用的方法是这样的，首先getSystemInfo→platform获得移动端还是PC端。

然后在CSS定义两组尺寸单位，像这样：

 [data-big-screen=true] {
   -s1: 1px;
   -s2: 2px;
}

 [data-big-screen=false] {
   -s1: 1px;
   -s2: 2px;
}

CSS样式这样写：

 .text-s {
   font-size: var(--s32);
 }

 .text-m {
   font-size: var(--s36);
 }

 .text-l {
   font-size: var(--s38);
 }

在WXML中这样使用：

<!-- 移动端显示这个view -->
<view wx:if="{{!isBigScreen}}" data-big-screen="{{isBigScreen}}">
  <text class="margin-xxxl text-l">测试文本</text>
</view>


<!-- PC端显示这个view -->
<view wx:if="{{isBigScreen}}" data-big-screen="{{isBigScreen}}">
  <text class="margin-xxxl text-l">测试文本</text>
</view>

各位大神有什么好方法，请指教。