mediaquerylist监听器没触发是因为表格元素不响应媒体查询变化，应监听全局视口断点并手动触发表格重排；需用addeventlistener替代已废弃的addlistener；布局切换应通过js替换dom结构而非css魔改；须保存mql引用并在销毁前移除监听；移动端卡片布局需用aria显式关联表头与单元格；监听器注册后需手动执行初始状态判断。
MediaQueryList监听器为什么没触发？
直接用 matchMedia().addListener() 在表格场景下常失效，核心原因是表格元素自身不响应媒体查询变化——它只管渲染，不管布局逻辑。真正要监听的不是表格，而是视口或容器的断点变化，再手动触发表格重排。
- 必须用
matchMedia("(max-width: 768px)").addEventListener("change", handler)（推荐），addListener()已废弃且在部分 Safari 版本中不触发 - 监听对象应是全局视口断点，而非表格 DOM 元素的
offsetWidth或getBoundingClientRect() - 如果表格嵌套在 flex/grid 容器里，需确保容器本身也响应断点，否则媒体查询可能被父级截断
表格结构怎么写才能适配两种布局？
不要靠 CSS 魔改 <table> 的 display 类型（比如硬切 <code>display: grid），这会破坏语义和屏幕阅读器支持。正确做法是用同一份数据，通过 JS 切换两套 DOM 结构：桌面端保留 <table>，移动端换成语义等价的 <code><div role="table"> + <code>aria-label 包裹的卡片流。
- 桌面结构用原生
<table>、<code><thead>、<code><tbody>，保证可访问性 <li>移动端结构用 <code><div class="table-card"> 包裹每行数据，每项用 <code><div role="cell"> 并绑定 <code>aria-labelledby指向表头 ID - 切换时用
element.replaceWith(newStructure)，避免残留 DOM 或事件丢失 - 把
const mql = matchMedia("(max-width: 768px)")存为模块级变量或组件实例属性 - 在切换布局前先执行
mql.removeEventListener("change", handler)，再重新绑定 - 若用 React/Vue，务必在
useEffect的 cleanup 函数或beforeUnmount钩子中移除监听 - 注意 SSR 环境下
matchMedia不存在，需加typeof window !== "undefined"判断 - 测试方法：打开 VoiceOver 或 NVDA，进入卡片区域，按 Ctrl+Alt+Arrow 应能顺序读出“姓名：张三”，而不是“张三”“李四”无上下文
如何避免重复监听和内存泄漏？
每次页面 resize 或路由跳转后重新初始化监听器，但没清理旧的，就会导致多次触发甚至崩溃。关键在于保存 MediaQueryList 实例引用，并在销毁前调用 removeEventListener。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
移动端表格卡片布局的可访问性陷阱
很多人只顾视觉切换，却让屏幕阅读器读不出表头与单元格的对应关系。卡片模式下，<th> 已失效，必须靠 ARIA 显式声明。
<ul><li>每个卡片用 <code><div role="row">，内部字段用 <code><div role="cell" aria-labelledby="header-id-1">
<li>表头需设 <code>id="header-id-1" 并用 aria-hidden="true" 隐藏视觉显示（仅供语音读取）
最易被忽略的是：监听器注册后不会自动执行一次初始状态判断，必须手动调用 handler(mql) 或检查 mql.matches 启动首次渲染。否则页面加载时布局错乱，用户得缩放窗口才生效。
