浏览器调整大小时如何更改div样式

Question

我正在创建一个脚本，其中当div由于调整大小而比正常大时，它会更改div的样式。

我想出了这个，但由于某种原因，有时它说宽度为0，我无法弄清楚为什么。 另外，当我更改div必须更改的数量时，它不起作用，并且也不会更改回去。

 window.addEventListener('resize', height); function height() { var height = document.getElementById('noline').offsetHeight; document.getElementById("noline").innerHTML = height; if (height <= 20) { document.getElementById('noline').setAttribute('id', 'line1'); } else { document.getElementById('line1').setAttribute('id', 'noline'); } } 

 #noline { border: solid 5px blue; } #line1 { border: solid 5px black; } 

 <div id="noline"> </div> 

我检查了stackoverflow，但是并没有真正找到一个容易理解的答案，因为我是javascript新手，所以我不确定自己做错了什么，所以我想知道自己做错了什么，如何解决它以及为什么会发生。

谢谢！

Answer 1

您可以在css文件中使用@media规则。

@media (max-width: 720px) {
    .something{
         .
         .
         .
    }
}

Answer 2

一个干净的解决方案是使用CSS媒体查询。 您首先要知道要定位的浏览器的尺寸。 然后做这样的事情

@media (max-width: 600px) {
  .div1 {

  }
}


 @media (max-width: 720px) {
      .div2 {

      }
    }