vue-pc端适配谷歌浏览器有无书签栏和全屏问题

前言

• 当我们使用模板进行二次开发时经常会遇到一个问题，就是有无书签栏的问题，视口就会相差一点，影响布局

• 以谷歌浏览器为例当它没有书签栏的时候视口高度就会多50px左右，就是app-main高度会多50px左右

• 这个问题本质是我们不知道用户浏览器是不是有书签栏和全屏的问题，那意思是有2中可能。我们不确定

• 那解决方案就是我们写2套布局代码适配有无书签栏和有无全屏情况，麻烦的是我们要测算他们视口范围值

• 使用css媒体查询即可，监测视口范围，但发现在某一个范围时，就执行这个范围代码，就实现适配

参考代码-以admin为例

.content {
  overflow: hidden;
  // 正常屏幕下的上下间距
  margin-top: 35px;
  margin-bottom: 25px;
  box-shadow: 0px 0px 5px 3px #2485ab;
  // 适配谷歌火狐，没有书签栏的上下边距
  @media screen and (min-height: 950px) and (max-height: 990px) {
    margin-top: 50px;
    margin-bottom: 40px;
  }
  // 适配浏览器全屏模式下的上下边距
  @media screen and (min-height: 1070px) {
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .baidu-map {
   // 宽度不要写死
    width: 100%;
    height: 827px;
    overflow: hidden;
    ::v-deep .anchorBL {
      display: none !important;
    }
  }

总结：

经过这一趟流程下来相信你也对 vue-pc端适配浏览器有无书签栏问题 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕