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

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 时，视频高度设置为 180px(正如我在上面定义的那样)但看起来更小。

在 iphone6 上将高度设置为 207 像素左右( View 高度的大约 31% 看起来不错)。

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

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

实际上高度设置为150px。

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

Answer 1

使用媒体查询

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

}


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