窄屏下双栏变单列应保持DOM结构、仅切换flex-direction: column，父容器须始终声明display: flex；错误隐藏左栏会破坏SEO与可访问性。
窄屏下双栏变单列用 flex-direction: column
直接隐藏左栏或设 display: none 是最常见错误，它破坏 DOM 顺序、影响屏幕阅读器、让 SEO 抓取失效。正确做法是保持两栏结构不变，只改主轴方向。
父容器必须已设 display: flex，否则 flex-direction 不生效；小屏断点建议用 @media (max-width: 480px) 而非 768px，更贴合真实手机 viewport 宽度。
- 展开态：父容器
flex-direction: row（默认可省略） - 窄屏态：加
flex-direction: column，左栏自动堆叠到上方，右栏紧随其后 - 堆叠后若对齐异常，检查是否被重置了
align-items—— 竖排时常用align-items: stretch或center控制水平居中 - 右栏若有固定高图片或广告，加
max-width: 100%和height: auto防止拉伸变形
左栏折叠后主内容不抖动的关键是 flex 解耦
靠 margin-left 或 padding-left 手动同步侧边栏宽度，换一个断点就错位；写死 width 更糟，响应式下会和 flex-basis 冲突。
真正解耦靠的是 flex 布局本身：左栏用 flex: 0 0 240px（禁伸缩、禁收缩、定宽），右栏用 flex: 1，浏览器自动算剩余空间。
立即学习“前端免费学习笔记（深入）”；
- 折叠时不要删左栏，而是切 class 改为
flex: 0 0 60px或flex: 0 0 0+overflow: hidden - 若左栏是
position: fixed，主内容区必须用padding-left预留空间，不能用margin-left—— 后者在文档流外无效 - 父容器需加
min-height: 100vh，防高度塌陷导致 sticky 失效 - 右栏内容含长英文或 URL 时，加
word-break: break-word或overflow-wrap: break-word防溢出
折叠状态刷新后丢失？localStorage 比 checkbox hack 更可靠
checkbox hack 只能在单页内记忆状态，跨标签页、刷新后失效；后台类应用必须持久化，localStorage 是唯一轻量可控方案。
关键不是存值，而是监听和同步：用户点击触发折叠，存 localStorage.setItem('sidebarCollapsed', 'true')；页面加载时读取并加对应 class；还要监听 storage 事件，确保多标签页状态一致。
- 别用
sessionStorage—— 关闭标签页即清空，不符合“记住偏好”的预期 - 存值前先做类型判断：
if (typeof Storage !== 'undefined')，防 IE9 等老环境报错 - 展开/收起按钮要同步
aria-expanded和tabindex，键盘用户才能感知状态 - 移动端小屏下，强制子菜单
display: none !important，避免误触
双屏设备（如 Fold、Duo）的窄屏判断不能只看 media query
媒体查询 @media (max-width: 480px) 在 Surface Duo 展开态可能仍命中，因为系统把双屏划分为两个独立视口；而折叠后 window.innerWidth 又可能远超 480px，导致布局错乱。
真实窄屏判断得结合运行时数据：visualViewport.width 反映当前可见区域，screen.availWidth 表示物理屏幕总宽，两者差值小于 50px 通常意味着已完全展开。
- 监听
resize事件，在 handler 中动态比对Math.abs(window.innerWidth - screen.availWidth) - 检测 UA 字符串是否含
Fold、Duo、SC-51A等关键词，辅助判断设备类型 - 必须配
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">，否则折叠态内容会被裁切 - Safari 尚未支持
visualViewport，降级方案用window.matchMedia('(display-mode: standalone)')+screen.orientation.angle
实际项目里最容易被忽略的，是折叠动画与可访问性的协同——比如用 transform: translateX() 实现滑入滑出时，aria-hidden 和 tabindex 必须随状态实时切换，否则键盘用户会卡在不可见元素上。这和布局逻辑无关，但一漏就成无障碍硬伤。
