Wie erzwinge ich die Höhe eines Elements mit verschiedenen Gerätemodi?

Question

Ich benutze Angular-Youtube-Embed und zusammen mit Chrome Dev Tools (Toogle Gerätemodus-Funktion), wollte ich testen, wie das Youtube-Element aussehen würde.

Ich habe

<div class="fixed-header my-video"> 
    <div style="padding:0px;"> 
     <youtube-video video-url='vm.videoUrl' player-vars="{controls : 0}" 
      player-width="'100%'" player-height="'180px;'"></youtube-video> 
    </div> 
</div> 

und meine CSS ist:

.my-video 
{ 
    height:180px; 
    width:100%; 
    position:absolute; 
    background:grey; 
    color:white; 
    text-align:center; 
    padding:0px; 
} 

und

.fixed-header{ 
margin-top:43px; 
} 

nun über die sieht gut aus, wenn ich den Gerätemodus zu iPhone5 wechseln. Wenn ich auf iPhone6 ​​umschalte, wird die Videohöhe auf 180px eingestellt (wie ich oben definiert habe), sieht aber kleiner aus.

Auf einer iphone6 ​​Einstellung Höhe um 207px (ca. 31% der Höhe sieht gut aus). So

Ich habe versucht, für Höhe mit 31vh in meinem css, die funktionieren, aber es nicht passiert es nicht auf meine Winkel-youtube-embed-Komponente, auch wenn ich es eingestellt (von meinem Controller) zu

player-height='vm.height' // vm.height = "31vh" 

In Tatsache ist, dass die Höhe auf 150px eingestellt ist.

Also meine Frage ist, gibt es eine Möglichkeit, die Höhe des Angular-Youtube-Embed-Element so einstellen, dass es 31% der View-Port braucht?

Answer 1

Verwendung Medienabfrage

@media (max-width: 1200px) { 
    .my-video { 
    height:360px; 
    width:100%; 

} 


@media (max-width: 600px) { 
    .my-video { 
    height:180px; 
    width:100%; 
} 

Answer 2

Versuchen Sie, wie in% Alter statt in Pixeln Höhe. Wie in Pixeln gibt es eine bestimmte Dimension, aber wenn in% angegeben Alter Komponente wird sich auf Basis der relativen Größe Windows anpassen

Answer 3

Vielen Dank an alle, die geholfen haben.

I set

vm.height = (0.5625 * $window.innerWidth); 

und das funktioniert und hält das Seitenverhältnis (mit einer Breite von 100%) auf 16: 9.