[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> ```