uniapp使用uni-nav-bar组件时怎么使顶部导航栏宽度自适应

在UniApp中，如果你想要让`uni-navbar`组件的顶部导航栏宽度自适应屏幕大小，你可以通过设置`style`属性来自定义其样式，并利用百分比或者CSS媒体查询来实现响应式设计。下面是一个简单的例子：

<template>
  <view class="container">
    <uni-navbar :scroll-top="true" :border-bottom="false" style="width: 100%; box-sizing: border-box;">
      <!-- 导航栏内容 -->
      <navigator-item>首页</navigator-item>
      <navigator-item>发现</navigator-item>
      <navigator-item>我的</navigator-item>
    </uni-navbar>
  </view>
</template>

<style scoped>
.container {
  position: relative;
}

/* 在小屏设备上（如手机端），设置导航栏宽度为90%，留出一些空间 */
@media (max-width: 750px) {
  uni-navbar {
    width: 90%;
  }
}
</style>

在这个示例中，`uni-navbar`的初始宽度设为100%，然后我们添加了一个媒体查询，在屏幕宽度小于等于750px时，将宽度调整为90%。这样，导航栏就能随着屏幕尺寸的变化自动调整宽度。