如何修复视频文字Banner模块移动端适配异常问题

修复方案 #

核心问题原因 #

1. 未配置移动端视口适配标签，浏览器默认按桌面端宽度渲染页面，是需要手动缩放至50%才能正常查看的主要原因
2. 所有文字字号使用固定px单位，未做小屏适配，移动端下字号过大导致内容溢出覆盖其他板块
3. 视频固定使用100vh作为高度基准，竖屏移动端下高度占比过高，文字展示空间不足容易溢出

具体修改步骤 #

• 第一步：在HTML文件的<head>标签内添加视口适配标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 第二步：修改文字字号为响应式单位，这里推荐用clamp()函数实现多端自动适配，无需额外写多段媒体查询，也可以根据自己的需求用媒体查询针对不同宽度单独设置字号
• 第三步：可选调整移动端下视频高度规则，同时给文字容器增加溢出防护，避免极端场景下内容覆盖其他板块

修改后完整CSS代码 #

.main-banner {
  position: relative;
}

#bg-video {
  min-width: 100%;
  min-height: 100vh;
  max-width: 100%;
  max-height: 100vh;
  object-fit: cover;
  z-index: -1;
}

/* 移动端调整视频最小高度，可根据需求调整数值 */
@media (max-width: 768px) {
  #bg-video {
    min-height: 80vh;
    max-height: 80vh;
  }
}

#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: 90%; /* 移动端缩小左右边距，增加可用宽度 */
  max-width: 1200px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 90%; /* 限制文字容器最大高度，避免溢出覆盖其他区域 */
  overflow-y: auto; /* 文字过多时可滚动，不溢出 */
}

.main-banner .caption h6 {
  margin-top: 0px;
  /* 最小16px，随视口宽度动态变化，最大22px */
  font-size: clamp(16px, 3vw, 22px);
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.main-banner .caption h2 {
  margin-top: 20px; /* 移动端缩小上下边距 */
  margin-bottom: 20px;
  /* 最小24px，随视口宽度动态变化，最大57px */
  font-size: clamp(24px, 6vw, 57px);
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  line-height: 1.4; /* 增加行高，避免文字重叠 */
}

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

内容的提问来源于stack exchange，提问作者Sirol