响应式视频布局与媒体查询技巧

2. 使用“固有比例”容器（推荐方法）

利用padding-top百分比实现等比缩放，比如16:9的比例：

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 = 9/16 = 0.5625 */
}
.video-container iframe,
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

这样无论屏幕多大，视频都会按16:9比例自适应父容器宽度。

3. 结合媒体查询优化不同设备显示

针对小屏幕设备，可微调边距、最大宽度或比例：

@media (max-width: 768px) {
  .video-container {
    padding-top: 60%; /* 稍微调整比例以适应手机竖屏 */
    margin: 10px 0;
  }
}
@media (max-width: 480px) {
.video-container {
padding-top: 75%; / 4:3 比例更适合某些老视频 /
}
}

也可以为平板或横屏手机设置更合适的最大宽度：

.video-container {
  max-width: 800px;
  margin: 0 auto; /* 居中显示 */
}

4. 支持多种视频源与现代布局

如果使用标签，确保设置width: 100%且不固定高度：

video {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

配合Flex布局居中整体播放器：

.player-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

基本上就这些。核心是用比例容器防止布局错乱，再用媒体查询适配关键断点，就能让视频在手机、平板、桌面都表现良好。不复杂但容易忽略细节，比如忘记position: absolute会导致内容溢出。测试时记得在多个设备模拟器中查看效果。

今天关于《响应式视频布局与媒体查询技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！