Javascript:innerWidth的条件不起作用

Question

我试图在不同的屏幕分辨率上实现不同的样式。

我试过if(window.innerWidth >= ) {}，但它不起作用。假设我希望h1的颜色是蓝色，当屏幕分辨率小于768px时，即使屏幕宽度大于定义的宽度，样式也会立即改变。

请参阅以下代码：

<h1 id="change" style="color: red;";>Hello</h1>
<script>
if(window.innerWidth <= 768){
document.getElementById("change").style.color = "blue";
}
</script>

Answer 1

您的代码片段在加载时只运行一次。你必须在一个循环中设置这个片段，这样它才能被一次又一次地测试。存在一个名为"；调整大小"；你可以使用。

window.addEventListener("resize", () => {
if (window.innerWidth <= 768) {
document.getElementById("change").style.color = "blue";
}
});

为什么不使用css媒体查询？

Answer 2

为什么不直接使用CSS媒体查询？！

@media (max-width: 768px) {
#change {
color: blue;
}
}

<p id="change">This is a dummy text</p>