Angular6 - 如何根据移动设备和浏览器改变 .css class 宽度

Question

我希望我的主视频容器在桌面浏览器中占据 window 宽度的大约 45%。但是，我希望它是移动设备屏幕宽度的 100%。我可以通过使用 *ngIf=bMobile 并在 .css 中使用两个不同的 .class 部分创建两个不同的 HTML 部分来实现结果，但我更愿意保留 [=24] =] 尽可能简单。

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

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

我的 .css 有这个 class 部分...

.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;
    }
}