@media规则必须写在CSS文件或<style>标签内才生效，放错位置（如HTML属性、JS字符串）会被忽略；移动端隐藏菜单应使用display:none而非visibility:hidden；JS绑定前需确保DOM就绪。
@media 规则必须写在 CSS 文件或 <style> 标签里才生效，塞进 HTML 属性或 JS 字符串里纯属白忙活。
为什么 @media 写了却没反应？
最常见原因是放错了位置。浏览器只解析 CSS 规则块内的 @media，其他地方全被忽略：
-
@media (max-width: 768px) { ... }必须出现在.css文件中，或<style></style>标签内部 -
<div media="screen and (max-width:768px)">—— HTML 没这个属性，语法错误 -
const cssStr = "@media ..."; document.styleSheets[0].insertRule(cssStr);—— 动态插入需确保规则格式合法，且时机正确（DOM 就绪后） -
<link media="screen and (max-width:768px)" href="mobile.css">是合法的，但它只决定这张样式表是否加载，不参与“条件匹配”逻辑
display: none 和 visibility: hidden 在移动端菜单里的区别
小屏下隐藏菜单项，别只靠 visibility: hidden 或 opacity: 0 —— 它们仍占布局空间，会导致汉堡图标错位、点击区域偏移、甚至触发横向滚动条。
- 用
display: none真正移出文档流，后续展开时再切回display: block或flex - 如果用了
flex-direction: column，检查order值是否把汉堡图标推到视口外（比如order: -1却没设align-items） - 移动端
nav容器建议加position: relative，方便后续用absolute定位下拉菜单，避免影响主布局流
导航项溢出、出现横向滚动条？先查 padding 和 flex-wrap
固定大像素内边距（如 padding-left: 70px）是罪魁祸首。窗口缩小时它不会收缩，直接撑爆容器。
- 把
header li的固定padding全删掉，改用gap控制间距（gap在flex或grid容器上才生效） -
header nav ul必须设flex-wrap: wrap，否则子项宁可溢出也不换行 - 小屏断点里加
flex-direction: column时，记得同步设align-items: stretch，让链接按钮自动撑满宽度 - 慎用
margin: -15px这类负边距 —— 它干扰 flex 计算，在 resize 过程中容易引发跳变或重叠
JS 绑定汉堡菜单前，DOM 真准备好了吗？
很多“点击无反应”问题其实和媒体查询无关，而是 JS 执行太早或选不到元素。
立即学习“前端免费学习笔记（深入）”；
- 脚本放在
<head>里？请包一层document.addEventListener("DOMContentLoaded", () => { ... }) -
document.querySelector(".mobile-menu-icon")返回null？立刻检查类名拼写、HTML 是否已渲染、是否被 JS 动态插入但未 await - 别在
@media里写 JS 逻辑 —— 媒体查询不触发 JS；要用window.matchMedia("(max-width: 768px)").matches主动判断，或监听change事件 - 切换菜单状态时，别只改
display，同步加/删is-open类名，CSS 过渡动画才可控
768px 是惯例，但 iPad mini 实际视口是 744px，安卓折叠屏可能卡在 812px。真机测试前，先用 console.log(window.innerWidth) 看一眼真实宽度。 
