ブラウザのサイズ変更時に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 { 

     } 
    }