[TOC] ## css的变化 ### 设置页面的背景 `page`相当于`body`节点 ``` page { background-color: red; } ``` ## CSS变量 | CSS变量 | 描述 | App | 小程序 | H5 | | --- | --- | --- | --- | --- | | \--status-bar-height | 系统状态栏高度 | [系统状态栏高度](http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight)、nvue注意见下 | 25px | 0 | | \--window-top | 内容区域距离顶部的距离 | 0 | 0 | NavigationBar 的高度 | | \--window-bottom | 内容区域距离底部的距离 | 0 | 0 | TabBar 的高度 | 注意: 1. var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度 2. 当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏 示例 ``` <template> <!-- HBuilderX 2.6.3+ 新增 page-meta, 详情：https://uniapp.dcloud.io/component/page-meta --> <page-meta> <navigation-bar /> </page-meta> <view> <view class="status_bar"> <!-- 这里是状态栏 --> </view> <view> 状态栏下的文字 </view> </view> </template> <style> .status_bar { height: var(--status-bar-height); width: 100%; } </style> ```