纯 CSS 实现响应式导航菜单完全可行，关键在 checkbox 状态联动与媒体查询配合，但必须确保 input 与 .nav-menu 同级且 input 在前、用 max-height 过渡替代 display、设置正确视口声明和足够触控热区，任一细节缺失都会导致失效。

纯 CSS 实现响应式导航菜单完全可行，关键在 input[type="checkbox"] 状态联动 + 媒体查询断点控制，但必须严格遵循 DOM 顺序和样式约束，否则 :checked ~ .nav-menu 选择器根本不会触发。

为什么 :checked ~ .nav-menu 不生效

这是最常卡住的一步。CSS 属性选择器依赖兄弟关系（~ 是通用兄弟选择器），所以 HTML 中 必须出现在

之前，且二者同级、无嵌套。

• 必须放在 和
  的共同父容器内，且是第一个子元素
• 如果把 套在
  里，或插在

  内部，:checked ~ .nav-menu 就查不到目标
• 移动端媒体查询中，.nav-menu 初始状态不能只靠 display: none 隐藏 —— 过渡动画需要 max-height: 0 + overflow: hidden 才能平滑展开

@media (max-width: 768px) 下的 display 与 transition 配合要点

小屏下隐藏菜单不是“设成 display: none”就完事，那样会导致过渡动画失效；也不是“只设 visibility: hidden”，它仍占布局空间，点击区域错位。

• 正确写法：@media (max-width: 768px) { .nav-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } }
• 展开时需给足够余量：input[type="checkbox"]:checked ~ .nav-menu { max-height: 300px; }（300px 要略大于所有菜单项总高度，设小了动画会突然截断）
• 桌面端必须显式重置：@media (min-width: 769px) { .nav-menu { max-height: unset; overflow: visible; } }，否则大屏下折叠逻辑残留

汉堡按钮点击无反应的常见原因

表面是 JS 没绑事件，但纯 CSS 方案里，问题几乎全出在 HTML 结构或默认行为上。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 的 for 属性值必须和 完全一致，大小写、连字符都不能错
• 标签本身没有可点击区域：iPhone SE 等小屏设备要求触控热区 ≥ 44×44px，仅靠图标尺寸不够，得用 padding 补足
• 若用 或 代替 ，会触发页面跳转或表单提交，导致菜单闪一下就消失 —— 必须加 event.preventDefault() 或换回
• 没加视口声明： 缺失时，iPhone 上媒体查询可能完全不触发

断点值该设多少才可靠

别迷信“768px 通用断点”。实际设备逻辑分辨率差异极大，硬写像素值容易在高 DPR 设备（如 iPhone 12+）上失效。

• 优先用相对单位：@media (max-width: 48em)（即 768px / 16 = 48em），更适配不同根字体大小
• 对超小屏（如 iPhone SE 第一代，逻辑宽 320px），可加兜底：@media (max-width: 320px)
• 如果菜单内容动态变化（比如有搜索框、用户头像），建议用内容驱动断点：@media (max-width: calc(100vw - 2rem))，比固定值更鲁棒

真正难的不是写对那几行 CSS，而是确保 在 DOM 里站对位置、max-height 估准高度、label 热区够大、视口声明存在——这些细节漏掉任何一环，整个纯 CSS 导航就静默失效。