能否在父容器中隐藏或限制子项显示数量，通过媒体查询控制移动端tab展示个数

实现方案 #

完全可以通过媒体查询（Media Queries）实现移动端、平板端的tab数量控制，你可以通过CSS的伪类选择器直接指定不同视口下的tab显示规则，不需要额外修改JS逻辑，适配成本很低。

核心实现代码

你可以在原有CSS的基础上新增以下媒体查询规则，根据你的实际业务需求调整断点阈值和显示的tab数量：

/* 平板端适配：视口宽度≤1024px时仅显示前4个tab */
@media (max-width: 1024px) {
  .tab button:nth-child(n+5) {
    display: none;
  }
}

/* 移动端适配：视口宽度≤768px时仅显示前2个tab */
@media (max-width: 768px) {
  .tab button:nth-child(n+3) {
    display: none;
  }
  /* 可选优化：小屏允许tab横向滚动，避免可见tab内容挤压变形 */
  .tab {
    overflow-x: auto;
    scrollbar-width: none; /* 火狐端隐藏滚动条 */
  }
  .tab::-webkit-scrollbar {
    display: none; /* Chrome、Safari端隐藏滚动条 */
  }
}

动态tab适配优化

如果你的tab是通过API动态加载、数量不固定，也可以在渲染tab时给优先级较低的tab统一加上hide-on-small的类名，再通过媒体查询控制该类的显示状态，灵活性更高：

@media (max-width: 768px) {
  .hide-on-small {
    display: none;
  }
}

如果需要展示隐藏的tab，只需额外新增一个「更多」下拉按钮，同样通过媒体查询控制仅在小屏显示即可，逻辑和上述规则完全一致。

内容的提问来源于stack exchange，提问作者Jason Salgado