如何用不同的設備模式強制元素的高度？

我正在使用angular-youtube-embed並與Chrome開發工具（toogle設備模式功能）一起使用，我想測試youtube元素的外觀。如何用不同的設備模式強制元素的高度？

我

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

和我的CSS是：

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

和

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

現在上面看起來很好，當我切換裝置模式的iPhone5。當我切換到iPhone6時，視頻高度設置爲180像素（正如我上面定義的），但看起來更小。

在iphone6設置高度約207px（約31％的視圖高度看起來不錯）。

所以我試圖用31vh在我的CSS其工作高度，但是當我將它不會把它傳給我的角YouTube上嵌入組件甚至（我的控制器）

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

在事實上，高度設置爲150px。

所以我的問題是有沒有方法來設置角度youtube嵌入元素的高度，使其佔視圖端口的31％？

來源

2016-05-02 JD.

使用媒體查詢

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

} 


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

來源

2016-05-02 12:20:22 scaisEdge

感謝您的回覆。不幸的是，由於angular-youtube-embed計算高度，所以這不起作用。 –

嘗試使用高度爲％年齡，而不是以像素爲單位。在像素中，它給出了特定的尺寸，但在％age組件中指定時會根據窗口相對尺寸自行調整。

來源

2016-05-02 12:31:05

謝謝我嘗試過，但沒有運氣。 –

感謝大家幫助。

我設置

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

和工作原理，並保持在16的縱橫比（寬度爲100％）：9。

來源

2016-05-03 23:21:42

如何用不同的設備模式強制元素的高度？

回答

相關問題