纯html无法实现响应式菜单折叠，必须依赖css的@media断点和:checked伪类配合checkbox状态控制显隐；仅用标签会导致小屏堆叠溢出、点击无反应、无障碍失效。
纯 HTML 原生能力无法实现响应式菜单——html 本身没有媒体查询、条件渲染或状态切换机制，所谓“原生能力”必须搭配 css（尤其是 @media 和 :checked）才能工作。试图只靠 <nav></nav>、<ul></ul> 和语义化标签就让菜单在手机上自动折叠，结果只会是小屏堆叠溢出、点击无反应、无障碍失效。
为什么不能只用 HTML 标签写响应式菜单
HTML 是结构层，不负责行为与样式响应：
-
<nav></nav>只是语义容器，不会自动隐藏子项或监听屏幕宽度 -
<ul></ul>和<li>默认垂直堆叠，flex或grid布局必须由 CSS 显式声明 - 没有
@media，就无法定义“768px 以下用汉堡按钮”这类断点逻辑 - 没有
<input type="checkbox">+:checked，就没有纯 CSS 驱动的显隐开关——这是零 JS 实现折叠的核心依赖
真正“无需复杂 CSS”的最小可行方案
所谓“不复杂”，是指避开 Flex wrap、transform、自定义属性等进阶技巧，只用三类基础 CSS 特性：
-
@media (max-width: 768px)控制断点（必须，不可省） -
display: flex+flex-direction: column管理移动端菜单流式展开 -
input[type="checkbox"]的:checked状态配合~兄弟选择器控制<ul class="menu"></ul>显隐
关键不是“不用 CSS”，而是**避免写冗余规则**：不需要 transition 动画也能工作；不需要 position: absolute 也能实现基础折叠；max-height 不是必需，display: none/block 足够（只是会丢失过渡效果）。
容易被忽略的 HTML 必须项
即使 CSS 极简，HTML 结构也必须满足几个硬性条件，否则菜单在移动端根本不可用：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">缺失会导致媒体查询完全失效 -
<input type="checkbox" id="menu-toggle">必须放在<label for="menu-toggle"></label>之前，且不能设display: none（应改用opacity: 0; position: absolute;保留可访问性） - 汉堡按钮的
<label></label>必须包裹文字或图标，不能空着——否则触屏点击区域不足 44px，iOS Safari 会忽略点击 - 菜单列表
<ul class="menu"></ul>必须紧跟在<input>后面，才能用#menu-toggle:checked ~ .menu正确捕获
一个能跑通的最简 HTML+CSS 组合
下面代码去掉所有注释和空行后仅约 40 行，没用 Flex wrap、gap、自定义属性，但能在 Chrome/Firefox/Safari（IE11+）正常折叠/展开：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>
.menu { display: flex; }
@media (max-width: 768px) {
.menu { display: none; }
#menu-toggle:checked ~ .menu { display: block; }
#menu-toggle { opacity: 0; position: absolute; }
.toggle-label { display: block; }
}
</style><input type="checkbox" id="menu-toggle"><label class="toggle-label" for="menu-toggle">☰</label>
真正复杂的点从来不在代码行数，而在于：是否理解 :checked 依赖 DOM 顺序、是否记得 viewport 是媒体查询的前提、是否意识到 display: none 在可访问性上的代价——这些细节一漏，菜单就在真实设备上静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
