Element-UI水平菜单el-menu在PC端和移动端如何适配及调整标签大小？

<el-menu :ellipsis="ellipsis" active-text-color="#ffd04b" background-color="#1b80e9" class="el-menu-demo" mode="horizontal" ref="menu" text-color="#fff">
  <el-menu-item index="0">
    <a target="_blank">首页</a>
  </el-menu-item>
  <el-menu-item index="1">
    <a target="_blank">活动消息</a>
  </el-menu-item>
  <el-sub-menu index="2">
    <template #title>全民健身</template>
    <el-menu-item index="2-1">游泳馆简介</el-menu-item>
    <el-menu-item index="2-2">收费公示</el-menu-item>
    <el-menu-item index="2-3">服务人员公示</el-menu-item>
    <el-menu-item index="2-4">规章制度公示</el-menu-item>
  </el-sub-menu>
</el-menu>

methods: {
  handleOpen(key, keyPath) {
    console.log("open: key=" + key, "keyPath=" + keyPath);
  },
  handleClose(key, keyPath) {
    console.log("close: key=" + key, "keyPath=" + keyPath);
  }
}

.el-menu-demo .el-menu-item {
  font-size: 14px;
  padding: 0 15px;
}

@media (max-width: 768px) {
  .el-menu-demo {
    /* 移动端样式 */
  }
}