uni-app 系统状态栏高度CSS变量--status-bar-height

作者：System 时间：2024年08月21日分类：所有,css 字数：449

在uni-app中，可以使用CSS变量--status-bar-height来设置系统状态栏的高度。这个变量是由uni-app框架提供，你可以在CSS中直接使用它来确保你的内容正确地与状态栏边界对齐。

以下是一个简单的例子，展示如何在uni-app的页面的CSS中使用这个变量：




/* 在页面的CSS中使用系统状态栏的高度 */
.page {
  padding-top: var(--status-bar-height);
  /* 这里可以添加其他样式，确保内容不会被状态栏遮挡 */
}

在上面的代码中，.page 类设置了顶部的padding-top为系统状态栏的高度。这样，你的页面内容就可以从状态栏下方开始布局，确保不会被状态栏遮挡。

请注意，这个变量只在uni-app框架支持的平台上有效，比如微信小程序、H5等。在不同的平台上，状态栏的高度可能会有所不同，如果需要适配不同设备，可能需要额外的处理。