纯css实现响应式内容过渡的关键是用max-height+overflow:hidden替代display:none，避免布局重排；需预设足够大的max-height值（如500px），禁用auto；移动端须监听matchmedia重置checkbox状态。
纯 CSS 实现响应式内容过渡，关键不在“动起来”，而在“动得稳、不闪、不塌、不卡”。用 display: none 切换直接导致布局重排和内容上跳，这是绝大多数人第一次写过渡时踩进的坑。
为什么 transition 用 max-height 而不是 height
height: auto 无法被 CSS 过渡识别，浏览器不知道目标值是多少；而 max-height 是可动画的数值属性。只要设一个足够大的值（比如 max-height: 500px），再配合 overflow: hidden，就能模拟出“从无到有”的展开效果。
- 别写
max-height: 0; max-height: auto—— auto 不触发过渡 - 预估最大高度：菜单项多、行高大、有 padding 时，
500px可能不够，1000px更保险 - 收起时若仍有微小残留高度，检查是否漏了
overflow: hidden或父容器有min-height
移动端 checkbox 触发过渡时内容错位或闪烁
常见于折叠菜单中子项使用 position: absolute 或 flex 布局未重置。桌面端正常，一缩到小屏就偏移，是因为媒体查询只改了显隐逻辑，没同步重置定位上下文。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 所有子菜单（如
.submenu或嵌套ul）在@media (max-width: 768px)内必须加display: none - 父级
li要加position: relative，否则absolute子项会相对 body 定位 - 避免在折叠态下保留
transform: translateY(-100%)类——它仍占渲染空间，可能撑开父容器
设备旋转后过渡失效或状态不同步
用户横屏→竖屏→再横屏，checkbox 仍保持 checked，但媒体查询已把菜单隐藏，结果是“点了没反应”或“菜单卡在半展开”。这不是 bug，是 CSS 媒体查询和表单状态天然解耦导致的。
- 必须监听
window.matchMedia("(max-width: 768px)")的change事件 - 当匹配状态变为 false（即回到桌面断点）时，手动执行
document.getElementById("nav-toggle").checked = false - 不要依赖
orientationchange——iOS Safari 已废弃，且不触发 CSS 媒体查询重计算
真正难的从来不是让内容动起来，而是让过渡在中英文混排、动态增减菜单项、页面滚动中始终对齐、不截断、不抖动。这些细节藏在 transform: translateY(100%) 替代 top: 100%、visibility: hidden 配合 opacity 控制可访问性、以及每次修改 max-height 后都重新验证实际展开高度里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
