如何让导航栏响应式，适配不同屏幕尺寸？

为了让导航栏响应式适应不同屏幕尺寸，通常会利用CSS媒体查询（Media Queries）。以下是基本步骤：

1. **设置基础样式**：首先，给导航栏定义初始的样式，比如固定宽度、默认布局等。例如：

   .responsive-nav {
       display: flex; /* 初始布局 */
   }

2. **媒体查询开始**：添加媒体查询，检测视口宽度是否达到某个阈值，然后应用不同的样式。例如，针对移动设备：

   @media (max-width: 768px) { /* 当宽度小于等于768px时 */
       .responsive-nav {
           flex-direction: column; /* 将导航切换成垂直排列 */
       }
   }

3. **调整布局**：在较小的屏幕上，可能会调整导航按钮的排列、显示或隐藏。例如：

   .responsive-nav ul {
       display: none; /* 移动设备下折叠菜单 */
   }
   .responsive-nav li {
       position: relative;
   }
   .responsive-nav li a {
       display: block;
       padding: 10px 0;
   }

然后添加触屏设备下的显示按钮或手势控制：

   .responsive-btn {
       display: inline-block;
       cursor: pointer;
   }
   @media (max-width: 768px) {
       .responsive-btn.active ~ ul {
           display: block;
       }
   }

4. **添加响应式断点**：可以根据需求添加更多的媒体查询，以处理更大的或更小的屏幕尺寸。

通过这样的方法，你可以确保导航栏在不同设备和窗口大小上都能保持良好的用户体验。记得测试各种设备，以确保适配性。