vite+vue3小程序顶部导航栏适配

在 Vite + Vue3 小程序中，可以使用 CSS3 的 `@media` 媒体查询来适配顶部导航栏。

首先，需要在 `App.vue` 中定义一个全局变量 `$navBarHeight`，用来保存顶部导航栏的高度：

<template>
  <div class="app">
    <nav-bar></nav-bar>
    <router-view />
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue'

export default {
  components: {
    NavBar
  },
  created () {
    // 获取导航栏高度
    const query = uni.createSelectorQuery().in(this)
    query.select('#nav-bar').boundingClientRect(res => {
      this.$navBarHeight = res.height
    }).exec()
  }
}
</script>

<style>
/* 顶部导航栏样式 */
#nav-bar {
  height: 44px;
  background-color: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

/* 页面内容样式 */
.app {
  padding-top: var(--nav-bar-height);
}
</style>

然后，在样式中使用 `@media` 媒体查询来适配不同设备的顶部导航栏高度：

/* iPhone X 及以上机型 */
@media (min-width: 375px) and (min-height: 812px) {
  :root {
    --nav-bar-height: env(safe-area-inset-top);
  }
}

/* 其他机型 */
@media (max-width: 374px), (max-height: 811px) {
  :root {
    --nav-bar-height: 44px;
  }
}

以上代码中，`@media` 媒体查询分别适配了 iPhone X 及以上机型和其他机型，根据设备的不同动态设置了 `--nav-bar-height` 变量的值。在样式中使用 `var(--nav-bar-height)` 来引用该变量，就可以实现顶部导航栏的适配了。

需要注意的是，在使用 `env(safe-area-inset-top)` 时，需要在 `manifest.json` 中配置 `"useAdaptNavigationBar": true`，才能生效。