最近在学习小程序,要把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: 320p彩虹的句子短唯美x) and (max-width: 359px) { page { --app什么叫奇函数-rem-size: 1五行相生0px; }}@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) 这样使用,虽然有点麻烦,但也是没办法中的办法了。
本文发布于:2023-04-07 06:34:04,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/1effb014b82fd79b5af197657c995330.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:小程序如何实现rem.doc
本文 PDF 下载地址:小程序如何实现rem.pdf
留言与评论(共有 0 条评论) |