EveryLike/pages/CSS/variable/variable.uvue

<template>
	<view class="page">
		<view class="status-bar-height">
			<text>status bar height</text>
		</view>
		<view class="window-top">
			<text>window top</text>
		</view>
		<view class="window-bottom">
			<text>window bottom</text>
		</view>

		<view class="uni-safe-area-inset-top">
      <text>height:var(--uni-safe-area-inset-top)</text>
		</view>
		<view class="uni-safe-area-inset-left">
			<text>height:var(--uni-safe-area-inset-left)</text>
		</view>
		<view class="uni-safe-area-inset-right">
			<text>height:var(--uni-safe-area-inset-right)</text>
		</view>
		<view class="uni-safe-area-inset-bottom">
			<text>height:var(--uni-safe-area-inset-bottom)</text>
		</view>
    <view class="uni-fixed-bottom">
    	<text>使用var(--uni-safe-area-inset-*)适配safe-area</text>
    </view>
	</view>
</template>

<style>
  .page {
    flex: 1;
  }

	.status-bar-height {
		height: var(--status-bar-height);
		background-color: red;
	}

	.window-top {
		height: var(--window-top);
		background-color: green;
	}

	.window-bottom {
		height: var(--window-bottom);
		background-color: blue;
	}

	.uni-safe-area-inset-top {
		height: var(--uni-safe-area-inset-top);
		background-color: yellow;
	}

	.uni-safe-area-inset-left {
		height: var(--uni-safe-area-inset-left);
		background-color: greenyellow;
	}

	.uni-safe-area-inset-right {
		height: var(--uni-safe-area-inset-right, 60px);
		background-color: saddlebrown;
	}

  .uni-fixed-bottom {
    position: fixed;
    left: var(--uni-safe-area-inset-left);
    right: var(--uni-safe-area-inset-right);
		bottom: var(--uni-safe-area-inset-bottom);
		background-color: salmon;
	}

	.uni-safe-area-inset-bottom {
		height: var(--uni-safe-area-inset-bottom);
		background-color: salmon;
	}
</style>