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

Question

I am creating a script where when a div is larger than normal because of a resize it change the style of the div.

I came up with this but for some reason sometimes it says the width is 0 and I can't really figure it out why. Also when I change the amount of when the div has to change it doesn't work and it doesn't change back.

 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> 

I checked stackoverflow but couldn't really find a easy understandable answer and because I am new to javascript I am not really sure what I did wrong, so I was wondering what I did wrong, how to fix it and why does it happen.

Thanks!

Answer 1

you can use @media rules in your css file.

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

Answer 2

A clean solution would be to use the css media queries. You first want to know the dimension of browser you want to target. Then do something like this

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

  }
}


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

      }
    }