在微信小程序中如何设置html字体大小,使全局的rem大小改变?
时间: 2024-04-29 14:26:07 浏览: 32
可以通过设置页面的 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 变化而改变了。
相关问题
如何在app.wxss中设置全局的rem单位的大小?
你可以在app.wxss文件中使用@media规则来设置全局的rem单位的大小,具体方法如下:
```
/* 在app.wxss文件中设置全局的rem单位为20px */
@media screen and (min-width: 320rpx) {
html {
font-size: 20px;
}
}
/* 在app.wxss文件中设置全局的rem单位为22px */
@media screen and (min-width: 375rpx) {
html {
font-size: 22px;
}
}
/* 在app.wxss文件中设置全局的rem单位为24px */
@media screen and (min-width: 414rpx) {
html {
font-size: 24px;
}
}
```
上述代码中,我们使用@media规则来设置不同屏幕宽度下的html元素的字体大小。当屏幕宽度小于320rpx时,html元素的字体大小为20px;当屏幕宽度等于或大于320rpx,但小于375rpx时,html元素的字体大小为22px;当屏幕宽度等于或大于375rpx,但小于414rpx时,html元素的字体大小为24px。这样,我们就可以根据屏幕宽度设置全局的rem单位大小了。
uniapp改变设置全局字体大小
要在uniapp中设置全局字体大小,可以在App.vue中设置全局样式。以下是一个简单的例子:
```css
<style>
html {
font-size: 16px; /* 设置默认字体大小 */
}
</style>
```
在这种情况下,所有的字体将会以16像素的大小呈现。您可以根据需要进行调整。如果您想要更细粒度的控制,可以使用rem单位并根据需要设置根元素的字体大小。例如:
```css
<style>
html {
font-size: 14px; /* 设置默认字体大小 */
}
@media (min-width: 768px) {
html {
font-size: 16px; /* 在屏幕宽度大于等于768px时,字体大小为16px */
}
}
</style>
```
在这种情况下,字体大小将在不同的屏幕宽度下进行调整。