"matchMedia 与媒体查询事件：动态主题与布局协作"

概述`matchMedia` 允许在 JS 中查询媒体条件并监听变化事件，适配用户的系统偏好（深色模式、动效降低）与设备特征，实现动态主题与布局协作。示例const media = window.matchMedia('(prefers-color-scheme: dark)') function applyTheme() { document.documentElement.dataset.theme = media.matches ? 'dark' : 'light' } applyTheme() media.addEventListener('change', applyTheme) const motion = window.matchMedia('(prefers-reduced-motion: reduce)') motion.addEventListener('change', () => toggleMotion(motion.matches)) 工程建议可访问性：尊重用户偏好；在动效降低时禁用复杂动画并提供替代。状态同步：主题状态与样式保持一致；与 CSS 层叠控制最小覆盖。兼容：旧浏览器回退到手动切换入口；检测事件支持。参考与验证MDN `window.matchMedia` 文档：https://developer.mozilla.org/docs/Web/API/Window/matchMediaweb.dev 相关指南：https://web.dev/