当通过链接跳转到同页或新页时，matchMedia 的 change 事件监听器不会自动重执行，导致屏幕尺寸已满足条件但样式未更新；需在页面加载完成时主动触发一次匹配检查。
当通过链接跳转到同页或新页时，`matchmedia` 的 `change` 事件监听器不会自动重执行，导致屏幕尺寸已满足条件但样式未更新；需在页面加载完成时主动触发一次匹配检查。
在使用 `window.matchMedia()` 实现基于视口宽度的动态样式切换时，一个常见误区是仅依赖 `"change"` 事件监听器——它只在媒体查询状态**发生变更时触发**，而无法覆盖页面首次加载、刷新或导航跳转（如点击 ``）后的初始状态校验。这意味着：即使用户已在小屏（≤500px）下点击链接进入页面，`mediaQ.matches` 的当前值可能未被读取，`#box` 的背景色仍保持默认 `red`，直到手动调整窗口宽度触发 `change` 事件。要彻底解决该问题，关键在于将媒体查询逻辑封装为可复用函数，并在两个时机调用：
-
页面 DOM 加载完成时（
DOMContentLoaded）——确保初始状态正确； -
媒体查询状态变化时（
change事件）——响应后续的窗口缩放。
以下是优化后的完整实现：
const mediaQ = window.matchMedia("(max-width: 500px)");
function updateBoxStyle() {
const box = document.getElementById("box");
if (!box) return; // 防御性检查，避免元素不存在时报错
box.style.backgroundColor = mediaQ.matches ? "blue" : "red";
}
// 监听媒体查询状态变化
mediaQ.addEventListener("change", updateBoxStyle);
// 页面加载完成后立即执行一次，确保初始状态准确
document.addEventListener("DOMContentLoaded", updateBoxStyle);配套 CSS 保持简洁（注意：内联样式优先级高于 CSS 规则，因此无需额外覆盖）：
#box {
height: 20rem;
width: 20rem;
background-color: red; /* 默认回退色，增强可访问性 */
}✅ 注意事项：
立即学习“Java免费学习笔记（深入）
”；- 始终在
DOMContentLoaded而非load事件中调用初始化函数，以避免等待图片/资源加载导致的延迟； - 添加
!box防御性判断，防止脚本在 DOM 元素尚未就绪或被移除时抛出异常； - 若项目使用模块化构建（如 Webpack/Vite），建议将该逻辑封装为可复用 Hook（如
useMediaQuery）以提升可维护性； - 对于更复杂的响应式行为（如添加类名、触发动画），推荐操作 CSS 类而非直接修改
style属性，便于统一管理与过渡效果。
通过上述改进，无论用户从大屏缩至小屏后点击链接，还是直接在小屏设备打开页面，#box 都能即时呈现正确的背景色，真正实现“所见即所得”的响应式体验。
