在微信小程序中如何设置html字体大小，使全局的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 变化而改变了。

相关问题

微信小程序设置字体大小

微信小程序中设置字体大小通常是通过CSS样式来控制的。用户可以手动调整浏览器的全局字体大小，或者开发者可以在页面的样式表中指定组件的字体尺寸。以下是设置字体大小的基本步骤：

1. **全局设置**：
- 在`app.wxss`文件中，你可以定义一个全局的`font-size`变量，然后在其他CSS规则中引用它。例如：

     @global {
       font-size: 14rpx; /* rpx是微信小程序推荐的单位 */
     }

2. **单个元素设置**：
- 对于某个特定组件，如`view`、`text`等，直接在其`style`属性中设置`font-size`，如：

     <view style="font-size: {{fontSize * rpx2px}}px;">文字大小</view>

其中，`{{fontSize}}`是动态值，`rpx2px`是一个转换函数，将rpx转换为px。

3. **响应式设计**：
- 使用百分比或em单位，可以使字体随着屏幕尺寸变化而自动缩放：

     .content {
       font-size: 0.75rem;
     }

用户也可以在微信小程序的设置里选择“显示设置”->“字体大小”，自行调整其全局的字体大小，这会影响到所有网页内的文本。

微信小程序 如何设置navigationBarTitleText字体尺寸

在微信小程序中，如果你想要自定义navigationBarTitleText（即页面标题文字）的字体大小，可以在app.json文件或者对应的wxml页面里设置。以下是步骤：

1. **在`app.json`中设置全局标题样式**:
- 打开`app.json`文件，在`window`对象下添加或修改`navigationBarTitleText`属性，例如：

     "window": {
       "navigationBarTitleText": {
         "text": "默认标题",
         "fontSize": "20rpx" // 这里的数字单位可以是rpx（rem）或者其他支持的单位
       }
     }

这样设置会全局生效。

2. **在单个页面的wxml中动态设置**:
- 如果你想让某个特定页面的标题有不同的字体大小，可以在该页面的`<view>`标签包裹导航栏时直接设置：

     <navigator>
       <view class="custom-title">
         {{titleText}} <!-- 页面数据，如 "我的页面" -->
       </view>
     </navigator>

然后在对应的wxss样式表中定义 `.custom-title` 类的 `font-size` 属性：

     .custom-title {
       font-size: 28rpx;
     }

注意，`rpx` 是微信小程序特有的长度单位，表示屏幕像素，1rpx等于设备宽度的1/750。