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

我的主要问题：有没有办法将“45vw”替换为由全局 bMobile 变量设置的变量，或其他实现相同目的的方法？

Answer 1

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

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