【懒人教程】如何让uniapp项目在PC大屏中显示移动端的效果 - 统一uniapp项目的PC、平板、手机的样式_uniapp tabbar 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.     页面宽度介于（375,800）时显示

   match-media | uni-app官网

ending...