小程序如何實現rem

最近在學習小程序，要把html的代碼轉換成小程序界面，其中就遇到了rem的轉換問題，但小程序不太兼容rem，不是不能用rem，而是沒辦法設置根元素的font-size，因為rem是相對於根元素的font-size，而小程序的根元素font-size一直是16px。既然我設置了page{ font-size:1px }也不起作用，那要怎么實現rem呢

這里我用css變量來實現偽rem，定義一個css變量--app-rem-size，然后在各個屏幕尺寸中定義--app-rem-size大小值；

以下是app.wxss文件

page{
    --app-rem-size:10px;
　　font-size:calc(var(--app-rem-size)*1.2);

}
@media screen and (min-width: 320px) and (max-width: 359px) {
     page {
         --app-rem-size: 10px;
     }
}
@media screen and (min-width: 360px) and (max-width: 413px) {
     page {
         --app-rem-size: 12px;
     }
}

@media screen and (min-width: 414px) {
    page {
        --app-rem-size: 14px;
     }
}

        

 

然后在我需要用到rem的地方，比如 height:calc(var(--app-rem-size)*2) 這樣使用，雖然有點麻煩，但也是沒辦法中的辦法了。