web前端：小程序如何实现rem

作者:菜工更新于： 2020-03-07 11:18:20

　　REM是相对单位，是相对html根元素。

　　最近在学习小程序，要把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);

　　}

　　@mediascreenand(min-width:320px)and(max-width:359px){

　　page{

　　--app-rem-size:10px;

　　}

　　}

　　@mediascreenand(min-width:360px)and(max-width:413px){

　　page{

　　--app-rem-size:12px;

　　}

　　}

　　@mediascreenand(min-width:414px){

　　page{

　　--app-rem-size:14px;

　　}

　　}

　　然后在我需要用到rem的地方，比如height:calc(var(--app-rem-size)*2)这样使用，虽然有点麻烦，但也是没办法中的办法了。

　　rem这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

　　目前，除了IE8及更早版本外，所有浏览器均已支持rem。