在微信小程序中如何设置html字体大小,使全局的rem大小改变?
时间: 2024-04-29 14:26:07 浏览: 414
今天看看来研究下微信小程序没人关注的的东西:em 和 rem
可以通过设置页面的 font-size,在 app.wxss 文件中添加以下代码:
```
/*设置全局的rem大小*/
@import "utils.wxss";
/*设置页面font-size*/
.page {
font-size: 30rpx; /* 相对于Viewport宽度 */
}
```
然后在 utils.wxss 文件中设置字体大小的缩放比例:
```
/*设置字体大小的缩放比例*/
@function px2rpx($px){
$result: $px / 750 * 100;
@return $result * 2;
}
/*定义rem大小*/
$rem: 50px;
/*设置html的字体大小*/
html {
font-size: $rem;
}
/*设置字体大小*/
body {
font-size: px2rpx($rem);
}
```
这样就可以让全局的 rem 大小随着页面的 font-size 变化而改变了。
阅读全文