如何解决如何在所有设备上制作背景视频100vh-navbar,同时保持宽高比
我最近为客户创建了此主页: https://www.calklin.com/
通过遵循以下指南,我可以使视频具有响应性: https://css-tricks.com/fluid-width-video/
但是,我仍然无法找到一种方法来保持视频的响应速度,同时以100vh-61px的速度考虑导航栏并保持正确的宽高比。
感谢您的建议!
解决方法
我相信您在正确的轨道上。只是您在calc()函数中似乎没有空格的高度。只需更改
.background-video {
height: calc(100vh-61px) !important;
}
对此
.background-video {
height: calc(100vh - 61px) !important;
}
您可以在注释部分的mozilla docs上的calc()函数中阅读有关添加空格的更多信息。
编辑
如果您要保持视频的长宽比并使其具有相应的响应速度,则可能要改用此
.background-video {
height: calc(100% - 61px) !important;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。