如何通过css实现响应式轮播导航

<nav class="carousel-nav">
  <div class="nav-item">首页</div>
  <div class="nav-item">产品</div>
  <div class="nav-item">服务</div>
  <div class="nav-item">案例</div>
  <div class="nav-item">关于我们</div>
  <div class="nav-item">联系我们</div>
</nav>
  

.carousel-nav {
  display: flex;
  overflow-x: auto;          /* 启用横向滚动 */
  scroll-behavior: smooth;  /* 滚动更平滑 */
  white-space: nowrap;       /* 防止换行 */
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动支持 */
  scrollbar-width: none;     /* 隐藏 Firefox 滚动条（可选） */
}
<p>.carousel-nav::-webkit-scrollbar {
display: none;             /<em> 隐藏 Chrome 滚动条（可选） </em>/
}</p><p>.nav-item {
flex: 0 0 auto;            /<em> 不伸缩，保持原始宽度 </em>/
padding: 12px 16px;
font-size: 14px;
text-align: center;
}</p>

@media (min-width: 768px) {
  .nav-item {
    font-size: 16px;
    padding: 14px 20px;
  }
}
<p>@media (min-width: 1024px) {
.carousel-nav {
overflow-x: visible;     /<em> 大屏不再滚动，改为换行或居中 </em>/
flex-wrap: wrap;
}
}</p>

.carousel-nav {
  scroll-snap-type: x mandatory;
}
<p>.nav-item {
scroll-snap-align: start;
}</p>