Angular6-如何根据手机和浏览器改变.css类宽度

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

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

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

My.css为该部分提供了此类

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

---

我的主要问题是：有没有一种方法可以将“45vw”替换为一个由全局bMobile变量设置的变量，或者用其他方法来实现同样的效果？

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

---

谢谢你！我能找到一个超级视频，帮助我更好地理解。但是，您可能需要编辑您的答案。。。请将“最小宽度”更改为“最大宽度”，或者像我所做的那样，将媒体查询保留为“最小宽度”，并将my.video中的值更改为“宽度：100vw”，然后将建议中的值更改为“宽度：45vw”，以使其正常工作。这是一种不同的处理问题的方式——可能更好，但我需要仔细考虑一下框架。。。谢谢你给我展示了一种不同的方式！也。。。另一个堆栈溢出的答案确实帮助填补了一些空白。。。去回答“你有很多媒体查询的方法”

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