Angular6-如何基于移动设备和浏览器更改.css类的宽度

Question

我希望我的主视频容器在台式机浏览器中占据窗口宽度的大约45％。但是，我希望它是移动设备上屏幕宽度的100％。我可以通过使用* ngIf = bMobile并在.css中使用两个不同的.class节创建两个不同的HTML节来实现结果，但是我希望尽可能地保持HTML的简洁。

我在初始化时设置了全局变量...

this.globals.bMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

我的.css在该节中有此类...

.video {
    width: 45vw; /* roughly 616px */
    align-items: center;
    display: flex;
    justify-content: center;
}

我的主要问题：是否可以用由全局bMobile变量设置的变量替换“ 45vw”，或采用其他方法来实现同一目的？

Answer 1

您始终可以使用CSS媒体查询来提高应用程序的响应速度。只需为不同的屏幕分辨率和设备更改以下最大宽度。您可以找到针对标准设备here的更复杂的媒体查询。

@media screen and (max-width: 480px) {
    .video {
        width: 100vw;
    }
}