css 更改 javascript 后 css 媒体查询不起作用

Question

我不明白为什么在使用javascript更改 HTML 元素的宽度后， media query不起作用。 例如，如果一个元素最初的宽度等于200 像素，然后我使用 javascript 100px 200px方式将其宽度更改为 100 像素。因此，当我期望由于媒体查询而对该宽度进行另一次更改时，它不起作用，实际上它保持最后一个大小由 javascript 制造，如下图所示。 那么你能向我解释为什么并且可以解决这个问题吗？

// Embedded CSS : initial width 
 #main { width:48%} 

let main = document.getElementById("main"); // html element
main.style.width="48%";

// css media query code which does not work due to javascript change
@media(max-width: 550px) {
  #main { width:100%}
}

注意：如果 JAVASCRIPT 没有进行任何更改，一切正常

Answer 1

您可以尝试!import ...即使您尝试通过JavaScript更改宽度，宽度将为100 %，对于小于 550 像素的屏幕，宽度将为 100%

完整的工作示例

 const btn = document.getElementById("btn"); const main = document.getElementById("main"); btn.addEventListener("click",function(){ main.style.width="60%"; })

 #main{ height:20px; width:48%; background-color:#00f; margin:auto; } @media(max-width: 550px) { #main { width:100% !important} }

 <div id="main"></div> <button id="btn">set style to 60% by js</button>

Answer 2

您使用了什么 javascript 语法？ 例如，如果您使用此语法

document.getElementById("elem").style.width = "500px";

然后它将返回到元素的属性而不是其 css 样式

<div id="elem" style="width: 500px">Hello World!</div>

仅供参考，媒体查询只有在内联样式上没有添加任何样式时才有效，除非您在 css 上添加!important查询。