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

效果图

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

写在前面

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

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

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

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

具体步骤

1. 修改App.vue，增加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;
   }

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

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

3. OK！

其他

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

ending...