html - 使其具有响应性
问题描述
我正在寻求帮助以响应此视频和文本代码。在桌面版本上,我正确地看到了这一点,在移动文本上太大并且覆盖了其他部分并且 vid 的大小不正确(太大),为了以正确的方式查看它,我必须将缩放从 100% 减少到 50%。我该如何解决这个问题?
.main-banner {
position: relative;
}
#bg-video {
min-width: 100%;
min-height: 100vh;
max-width: 100%;
max-height: 100vh;
object-fit: cover;
z-index: -1;
}
#bg-video::-webkit-media-controls {
display: none !important;
}
.video-overlay {
position: absolute;
background-color: rgba(35, 45, 57, 0.8);
top: 0;
left: 0;
bottom: 7px;
width: 100%;
}
.main-banner .caption {
text-align: center;
position: absolute;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.main-banner .caption h6 {
margin-top: 0px;
font-size: 22px;
text-transform: uppercase;
font-weight: 800;
color: #fff;
letter-spacing: 0.5px;
}
.main-banner .caption h2 {
margin-top: 30px;
margin-bottom: 25px;
font-size: 57px;
text-transform: uppercase;
font-weight: 800;
color: #fff;
letter-spacing: 1px;
}
.main-banner .caption h2 em {
font-style: normal;
color: #ff0000;
font-weight: 900;
}
.main-banner .caption h2 strong {
font-style: normal;
color: black;
font-weight: 900;
}
<div class="main-banner" id="top">
<video autoplay muted loop id="bg-video">
<source src="assets/images/gym-video.mp4" type="video/mp4" />
</video>
<div class="video-overlay header-text">
<div class="caption">
<h6></h6>
<h2>Senza motivazione non c'è <em>sacrificio</em>, senza sacrificio non c'è <em>disciplina</em>, senza disciplina non c'è <em>risultato</em>.</h2>
<div class="main-button scroll-to-section">
<a href="#features">Prenota la tua prova</a>
</div>
</div>
</div>
</div>
解决方案
推荐阅读
- lotus-notes - 如何在发送到网络的电子邮件中保持富文本格式和内嵌图像?
- javascript - 检测页面何时在 iframe 内处于加载状态
- r - 变异和超前滞后以在列中添加下一个值?
- google-chrome - Chrome(打开)Shadow DOM 事件未到达主机
- html - 包含相同数量字符的行根据屏幕大小表现不同
- javascript - 对其中包含可选斜杠的字符串求和
- rest - BMC Remedy 9.1 REST API 前端性能影响
- node.js - 会话管理 Socket.io
- string - Pandas .min() skipna 选项不适用于混合字符串和 NaN 系列
- java - 如何使用 JDBC 处理 DAO 之间的交互?