uni-app 自适应各种机型状态栏

<view class="top1">
			<view class="statbar">
				<view class="status_bar"></view>
			</view>//这里是适配的状态栏的代码
			<view class="navigator">
				<view class="weizhiPosition" @click="showTree">
					<image src="../../static/cy/dingwei.png" mode="" class="gd" ></image>
					<text class="choosePlace">{
     {
     choosenCity}}</text>
				</view>

				<text class="title">标题</text>
				<image src="../../static/cy/tongzhi.png" mode="" class="ss"></image>
			</view>
		</view>
		<view class="topBottom"></view>
.top1 {
     
		position: fixed;
		top: 0;
		z-index: 100;
	}
.statbar {
     
		width: 750rpx;
		height: var(--status-bar-height);
		background-color: #0080FF;
	}

	.status_bar {
     
		height: var(--status-bar-height);
		width: 100%;
		position: absolute;
	}
	.topBottom {
     
		height: var(--status-bar-height);
		width: 100%;
	}

你可能感兴趣的:(uniapp,css,html,html5)