如何使用不同的设备模式强制元素的高度？

Question

我正在使用 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 上将高度设置为 207 像素左右（大约 31% 的视图高度看起来不错）。

所以我尝试在我的 css 中使用 31vh 作为高度，但它不会将它传递给我的 angular-youtube-embed 组件，即使我（通过我的控制器）将它设置为

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

实际上高度设置为 150px。

所以我的问题是有没有办法设置 angular-youtube-embed 元素的高度，使其占据视口的 31%？

Answer 1

感谢所有帮助过的人。

我设置了

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

这样可以将纵横比（宽度为 100%）保持在 16:9。

Answer 2

尝试使用 %age 而不是像素的高度。与像素一样，它给出了特定的尺寸，但是当在 %age 组件中指定时，它会根据窗口的相对大小自行调整

Answer 3

使用媒体查询

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

}


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