屏幕缩至500px以下点击链接后JS Media Query失效的解决诉求

问题复现 #

当屏幕宽度缩至500px以下，点击链接跳转页面（当前页或项目内其他页）后，JS媒体查询的change事件不再生效，必须先将屏幕拉回500px以上再缩小，才能重新触发样式切换。

原代码 #

JavaScript

const mediaQ = window.matchMedia("(max-width:500px)")

mediaQ.addEventListener("change", function(){
    if(mediaQ.matches){
        document.getElementById("box").style.backgroundColor = "blue"
    }
    else{
        document.getElementById("box").style.backgroundColor = "red"
    }
})

CSS

#box{
    height: 20rem;
    width: 20rem;
    background-color: red;
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    
    <a href="index.html">跳转到当前页面（项目中实际为其他页面）</a> 
</body>
</html>

问题原因 #

跳转页面后，屏幕宽度未发生变化，媒体查询的change事件不会被触发；而页面加载时没有主动执行样式判断逻辑，导致元素停留在初始的红色样式。

修复方案 #

把媒体查询的判断逻辑抽成独立函数，页面加载时主动调用一次，同时绑定到change事件上。这样不管页面加载时屏幕是什么尺寸，都会立即应用对应样式，后续尺寸变化也能正常触发切换。

修改后的JavaScript代码：

const mediaQ = window.matchMedia("(max-width:500px)")

// 抽成独立的样式处理函数
function handleMediaChange() {
    const box = document.getElementById("box");
    box.style.backgroundColor = mediaQ.matches ? "blue" : "red";
}

// 页面加载时立即执行一次，适配当前屏幕尺寸
handleMediaChange();
// 绑定尺寸变化事件
mediaQ.addEventListener("change", handleMediaChange);

额外优化（可选） #

如果只是简单的样式切换，完全可以用CSS媒体查询实现，不需要JS介入，稳定性更高：

#box{
    height: 20rem;
    width: 20rem;
    background-color: red;
}

@media (max-width: 500px) {
    #box {
        background-color: blue;
    }
}

这种方式下，不管页面如何跳转，CSS都会自动适配当前屏幕尺寸，无需额外逻辑维护。

内容的提问来源于stack exchange，提问作者Fernando Gunawan