当前位置： 移动技术网 > IT编程>网页制作>CSS > 小程序如何实现rem

小程序如何实现rem

2019年11月13日  | 移动技术网IT编程  | 我要评论

南堡油田,青岛厚壁钢管,中国水雷

最近在学习小程序，要把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) 这样使用，虽然有点麻烦，但也是没办法中的办法了。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网