前端Wiki/CSS3/深入/媒体查询与响应式

实战响应式导航

把媒体查询用于实战，做一个「宽屏横排菜单、窄屏汉堡菜单」的响应式导航，不写 JS：

窄屏（基础样式）：logo + 汉堡按钮一行；菜单列表默认收起，靠「隐藏的 checkbox 被选中」展开——#menu-toggle:checked ~ .links 把菜单变为显示。
宽屏（min-width: 768px）：隐藏汉堡按钮，菜单强制横排，checkbox 的展开逻辑不再起作用。
汉堡图标用三条 border 或三个 span 绘制，纯 CSS 实现。

这个案例综合了前面多个知识点：移动优先的写法顺序、UI 状态伪类做纯 CSS 交互、flex 控制横竖排布。它是真实项目响应式导航的简化原型，替换图标和动画后即可上线。

本节要点窄屏收起菜单靠「隐藏 checkbox + :checked 兄弟选择器」展开；宽屏媒体查询里隐藏按钮并强制横排；这是移动优先 + 纯 CSS 交互的综合应用。

CSS

<style>
  .nav {
    background: #1f2937; color: #fff;
    padding: 10px 16px;
    display: flex; justify-content: space-between;
    align-items: center;
  }
  .burger { display: inline-block; cursor: pointer; }
  .links { display: none; }          /* 窄屏默认收起 */
  #mt { display: none; }             /* 隐藏checkbox */
  #mt:checked ~ .links {             /* 选中即展开 */
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
  }
  .links a { color: #cbd5e1; text-decoration: none; }
  @media (min-width: 768px) {        /* 宽屏改横排 */
    .burger { display: none; }
    .links { display: flex !important; gap: 20px; }
  }
</style>
<nav class="nav">
  <span>前端Wiki</span>
  <label class="burger" for="mt">☰</label>
  <input type="checkbox" id="mt">
  <div class="links">
    <a href="#">首页</a><a href="#">教程</a><a href="#">关于</a>
  </div>
</nav>

🔗 相关词条移动优先 span flex 媒体查询 CSS 选择器 JS 列表

📚 推荐阅读

移动前端开发经验指南万象云档

YY UED 前端规范指南万象云档

优达学城前端样式指南万象云档

Element Plus v2.2 组件库教程万象云档

ECharts 图表教程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读