我希望我的主视频容器在桌面浏览器中占据窗口宽度的大约 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”,或者有其他方法来实现同样的事情?
最佳答案
您始终可以使用 CSS 媒体查询来提高您的应用的响应速度。只需针对不同的屏幕分辨率和设备更改下面的最大宽度。您可以找到更复杂的标准设备媒体查询 here .
@media screen and (max-width: 480px) {
.video {
width: 100vw;
}
}
关于css - Angular6 - 如何根据移动设备和浏览器改变 .css 类宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51367804/