详细介绍：【懒人教程】如何让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组件

   导航栏
   页面内容
   底部标签栏

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