media queries 必须写在 css 中才生效，即外部 .css 文件或 标签内；html 的 media 属性仅控制样式表加载，js 字符串中的 @media 无效。
media queries 必须写在 CSS 里才起作用，不是加在 HTML 标签上、也不是塞进 JS 字符串里就能生效的。你改了 @media (max-width: 768px) 却没反应？八成是放错地方了。
media queries 写在哪才真正生效
浏览器只解析 CSS 规则块里的 @media，其他位置全是无效的：
-
@media只能出现在外部.css文件中，或<style></style>标签内部 - 绝对不要写成
<div media="screen and (max-width:768px)"> —— HTML 没有这个属性 <li>也不要拼成 JS 字符串，比如 <code>const mq = "@media (max-width:768px) { ... }"，这不会触发样式计算 -
<link media="screen and (max-width:768px)">是合法的，但它只控制整张样式表是否加载，不参与条件样式匹配 - 确保
nav ul在移动端设为display: none，而不是仅靠visibility: hidden或opacity: 0—— 后两者仍占布局空间 - 如果用了
display: flex布局，注意flex-direction: column会改变子元素顺序，别让汉堡图标被order错位到看不见的位置 - 移动端
nav容器建议加position: relative，方便后续用absolute定位展开菜单，避免影响文档流 - 确保 JS 在 DOM 加载完成后运行，比如用
document.addEventListener("DOMContentLoaded", ...)，而不是脚本放在里直接执行 - 检查
querySelector是否真拿到了元素：document.querySelector(".mobile-menu-icon")返回null？那说明类名拼错了，或 HTML 结构还没渲染 - 别在
@media里写 JS 逻辑 —— 媒体查询不触发 JS，得靠window.matchMedia()主动监听变化 - 展开菜单时，别只切
display，记得同步 toggle 类名（如is-open），方便用 CSS 过渡动画
导航栏在小屏下不隐藏？检查 display 和 flex 行为
常见现象：桌面端菜单横向排列正常，但切到手机尺寸后菜单项堆成一竖列、还挤出滚动条，甚至汉堡图标压根不显示。
汉堡图标点击没反应？JavaScript 绑定前先确认 DOM 状态
很多问题其实和 media queries 无关，而是 JS 执行时目标元素还没准备好：
最常被忽略的一点：断点值要和设计稿/测试设备对齐。用 768px 是惯例，但如果你的导航栏在 iPad mini 上就错位，就得查实际视口宽度，而不是硬套“通用断点”。
