Wenden Sie CSS auf div entsprechend der Bildschirmausrichtung an

Question

Ich brauche ein Div, um eine andere Höhe zu haben, wenn der Bildschirm entweder Querformat oder Hochformat ist. Ich würde Medienabfrage verwenden, aber nicht sicher, ob das automatisch die Größe der div ändert, wenn das Gerät in der Hand gedreht wird.

Ich habe das bisher, aber es scheint nicht zu funktionieren.

<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

Bevor Sie beginnen um mit JQuery Messing Ihre Elemente stylen, nehmen Sie vielleicht einen tieferen Einblick in CSS-Medienanfragen:

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 
} 

Landschaft mit Porträt geändert werden.

Answer 3

Sie können Querformat und Hochformat in Medienabfragen verwenden und können dies erreichen.

Einige Dinge wie das.

@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>