当通过 matchMedia 监听屏幕宽度变化时，仅绑定 change 事件无法保证页面重新加载（如点击链接跳转）后的初始状态正确；必须在 DOM 加载完成时主动执行一次状态检查。
当通过 `matchmedia` 监听屏幕宽度变化时，仅绑定 `change` 事件无法保证页面重新加载（如点击链接跳转）后的初始状态正确；必须在 dom 加载完成时主动执行一次状态检查。
在使用 window.matchMedia() 实现基于视口宽度的动态样式切换时，一个常见误区是只监听 change 事件。该事件仅在媒体查询匹配状态发生改变时触发（例如从宽屏拖动缩放到窄屏），但当用户点击链接导致页面重新加载（即使是同域内跳转，如 <a href="index.html"></a>），JavaScript 会完全重执行，而此时若当前视口已满足 (max-width: 500px)，change 事件却不会自动触发——因为状态并未“变化”，只是页面刷新后初始匹配即为 true，但你的逻辑尚未执行。
因此，正确的做法是将媒体查询处理逻辑封装为独立函数，并在两个关键时机调用：
- 页面 DOM 加载完成时（
DOMContentLoaded），确保初始状态立即生效； - 媒体查询匹配状态变更时（
change事件），实现后续动态响应。
以下是优化后的完整实现：
const mediaQ = window.matchMedia("(max-width: 500px)");
function updateBoxColor() {
const box = document.getElementById("box");
if (!box) return; // 防御性检查：确保元素存在
box.style.backgroundColor = mediaQ.matches ? "blue" : "red";
}
// ✅ 页面加载完成时立即应用当前匹配状态
document.addEventListener("DOMContentLoaded", updateBoxColor);
// ✅ 状态变化时实时更新
mediaQ.addEventListener("change", updateBoxColor);
同时，建议在 CSS 中保留默认样式作为兜底（你已做到），并确保 HTML 结构简洁可靠：
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Responsive Media Query Demo</title><style>
#box {
height: 20rem;
width: 20rem;
background-color: red; /* 初始色，与 JS 默认分支一致 */
transition: background-color 0.3s ease; /* 可选：添加平滑过渡 */
}
</style><div id="box"></div>
<a href="index.html">跳转到同项目其他页面</a>
<!-- 注意：实际项目中若跨页面，需确保每页都引入相同 JS 逻辑 -->
⚠️ 重要注意事项：
- 此方案适用于单页内逻辑复用；若链接跳转至不同 HTML 文件（如
page2.html），则必须在每个目标页面中单独引入并执行相同的 JS 代码，否则新页面无监听逻辑； - 推荐将
updateBoxColor抽离为模块化函数或使用现代前端框架（如 React 的useEffect+matchMedia），以提升可维护性； -
matchMedia兼容性良好（支持 IE10+），但旧版 Safari 需注意addEventListener写法（本例已兼容）； - 若涉及多个媒体查询或复杂状态，可进一步结合
useState（React）或自定义 Hook 封装。
通过显式触发初始化检查，你彻底消除了“点击链接后样式未更新”的体验断层，真正实现响应式行为的无缝衔接。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
