画面の向きに合わせてdivにCSSを適用する

Question

画面が横長か縦長のときに別の高さにするにはdivが必要です。私はメディアクエリを使用しますが、デバイスが手動で回転している場合、その自動サイズをdivに変更するかどうかはわかりません。

私はこれまでこれを持っていますが、動作していないようです。あなたの要素のスタイルをjQueryを使っていじり始める前に

<style type="text/css"> 
    #header { 
    position:relative; 
    height:100vh; 
    } 
</style> 

<script type="text/javascript"> 
    $(window).resize(function() { 
    if ($(this).height() > $(this).width() { 
     $('#header').css("height","50vh"); } 
    } 
</script> 

Answer 1

、多分CSSメディアクエリを深く見てみましょう：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#orientation

Answer 2

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) and (orientation : landscape) { 
    // styles 
} 

風景は、肖像画を変更することができます。

Answer 3

メディアクエリでは、横向きと縦向きを使用でき、これを達成できます。

このようなものもあります。

@media screen and (orientation: portrait) { 
 
    #header { 
 
    position: relative; 
 
    height: 50vh; 
 
    background-color: blue; 
 
    } 
 
} 
 
@media screen and (orientation: landscape) { 
 
    #header { 
 
    position: relative; 
 
    height: 100vh; 
 
    background-color: red; 
 
    } 
 
}

<header id="header"> 
 
</header>