在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
最近在学习小程序,要把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) 这样使用,虽然有点麻烦,但也是没办法中的办法了。
|
请发表评论