uniapp h5底部导航tabbar 媒体查询设置宽度

uni-app 中的 H5 底部导航栏（TabBar）通常用于构建底部固定的 UI 元素，比如小程序常见的底部菜单。要在 H5 页面上使用媒体查询设置 TabBar 的宽度，你需要考虑屏幕尺寸的变化。下面是一个基本的示例：

<!-- index.html -->
<template>
  <view class="tab-bar">
    <uni-tabbar :options="tabBarOptions" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabBarOptions: {
        // 根据屏幕宽度动态设置样式
        activeColor: '#007aff',
        itemColor: '#fff',
        selectedIconPath: '../static/tab-icon-active.png', // 活跃图标路径
        unselectedIconPath: '../static/tab-icon-unactive.png', // 非活跃图标路径
        items: [
          {
            text: '首页',
            iconPath: '../static/home-icon.png',
            pagePath: '/pages/home/home'
          },
          // 更多选项...
        ]
      }
    };
  },
  computed: {
    // 使用 Vue 的计算属性，在页面加载时根据 window.innerWidth 计算 tabbar 宽度
    calculatedWidth: function () {
      return document.documentElement.clientWidth < 640 ? '100%' : 'auto';
    }
  },
  ready() {
    this.tabBarOptions.window = {
      width: this.calculatedWidth
    };
  }
};
</script>

<style scoped>
.tab-bar {
  position: fixed;
  bottom: 0;
  width: {{ calculatedWidth }}; /* 使用计算属性设置宽度 */
}
</style>

在这个例子中，`calculatedWidth` 利用了 `window.innerWidth` 来判断设备宽度，如果是小屏设备（如 iPhone SE），宽度设为 100%，在大屏设备上则使用自动宽度 (`auto`)。请注意替换实际的图片路径和页面路径。