【懒人教程】如何让uniapp项目在PC大屏中显示移动端的效果 - 统一uniapp项目的PC、平板、手机的样式

效果图

H5环境下，PC、平板、手机的样式一致

写在前面

无论是uniapp使用pages.json展示的顶部导航栏navbar和底部标签栏tabbar，

还是第三方的navbar、tabbar组件，

都是基于position: fixed；的写法，导致无法自适应的按照某种宽度居中显示，一直是屏幕全宽，

所以，严重建议自己手写navbar、tabbar并封装使用。

具体步骤

修改App.vue，增加css：

css 复制代码

/****************************************************/
/* 【目标】PC、平板、移动端统一使用移动端的效果，并居中 */
/* body底色：黑底 */
page {
	background-color: #000;
	width: 100%;
}
/* 视口底色：浅灰色 */
uni-page-body {
	background-color: #e8e8e8;
}
/* 适配PC - 居中窄屏 */
#app,
.appNavbar,
.appTabbar {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	font-weight: normal;
	background-color: #e8e8e8;
}
.appNavbar, .appTabbar {
	background-color: #fff;
}
@media (min-width: 768px) {
	/* PC 端（屏幕宽度最低768px时，超出平板、手机范围，固定375px并居中） */
	#app,
	.appNavbar,
	.appTabbar {
		width: 375px;
		margin: 0 auto;
	}
}

/* 自己写tabbar、navbar，实现PC端和移动端统一展示移动端效果 */
.appNavbarWrapper,
.appTabbarWrapper {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.appTabbarWrapper {
	bottom: 0;
	top: unset;
}

在页面上，自己手写navbar、tabbar组件

html 复制代码

<template>
	<view>
		
		<!-- 顶部导航栏 -->
		<view class="appNavbarWrapper" style="height: 30px;">
			<view class="appNavbar">
				导航栏
			</view>
		</view>
		<!-- 顶部导航栏 - 占位空间 -->
		<view style="height: 30px;"></view>
		
		
		
		<!-- 页面内容 -->
		<view>
			页面内容
		</view>
		
		
		
		
		<!-- 底部标签栏 -->
		<view class="appTabbarWrapper" style="height: 30px;">
			<view class="appTabbar">
				底部标签栏
			</view>
		</view>
		<!-- 底部标签栏 - 占位空间 -->
		<view style="height: 30px;"></view>
		
	</view>
</template>

<script setup>
	
</script>

<style>
	       
</style>

OK！

其他

"page 相当于 body 节点..."
页面样式与布局 | uni-app官网
<match-media :min-width="375" :max-width="800">
<view>页面宽度介于（375,800）时显示</view>
</match-media>
match-media | uni-app官网

ending...