HTML响应式多媒体与自适应

响应式多媒体确保内容在不同设备上正确显示和良好性能。

响应式图片

基础响应式

CSS

img {
  max-width: 100%;
  height: auto;
}

srcset属性

根据设备像素比或宽度选择图片。

HTML

<img
  src="default.jpg"
  srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="响应式图片">

属性	说明
srcset	图片源及宽度描述符
sizes	媒体条件下的显示尺寸
w描述符	图片实际宽度

picture元素

根据媒体条件选择不同图片。

HTML

<picture>
  <source media="(min-width: 1200px)" srcset="large.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="medium.webp" type="image/webp">
  <source media="(min-width: 400px)" srcset="small.webp" type="image/webp">
  <img src="fallback.jpg" alt="响应式图片">
</picture>

art direction艺术指导

不同屏幕显示不同裁剪版本。

HTML

<picture>
  <!-- 横屏大图 -->
  <source media="(min-width: 800px)" srcset="hero-wide.jpg">
  <!-- 竖屏小图 -->
  <source media="(max-width: 799px)" srcset="hero-narrow.jpg">
  <img src="hero-wide.jpg" alt="产品展示">
</picture>

响应式视频

基础响应式

CSS

video {
  max-width: 100%;
  height: auto;
}

保持宽高比容器

HTML

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

<div class="video-container">
  <iframe src="https://youtube.com/embed/xxx"></iframe>
</div>

常见比例计算

比例	padding-bottom
16:9	56.25%
4:3	75%
21:9	42.86%
1:1	100%

aspect-ratio属性

现代CSS原生支持。

CSS

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

响应式iframe

固定比例容器

CSS

.iframe-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.iframe-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

全屏嵌入

CSS

.iframe-full {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  border: none;
}

媒体查询适配

断点策略

CSS

/* 移动优先 */
img { width: 100%; }

/* 平板 */
@media (min-width: 768px) {
  img { width: 50%; }
}

/* 桌面 */
@media (min-width: 1024px) {
  img { width: 33.33%; }
}

设备像素比适配

CSS

/* 标准屏幕 */
.icon { background-image: url('icon.png'); }

/* 高清屏 */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  .icon { background-image: url('icon@2x.png'); }
}

性能优化

懒加载

HTML

<img src="image.jpg" loading="lazy" alt="懒加载图片">
<iframe src="embed.html" loading="lazy"></iframe>

解码策略

HTML

<img src="image.jpg" decoding="async">
<!-- sync: 同步解码 -->
<!-- async: 异步解码 -->
<!-- auto: 浏览器决定 -->

预加载

HTML

<link rel="preload" as="image" href="hero.jpg">
<link rel="preload" as="video" href="intro.mp4">

fetchpriority

HTML

<img src="hero.jpg" fetchpriority="high">
<img src="gallery1.jpg" fetchpriority="low">

object-fit与object-position

object-fit

控制内容如何填充容器。

CSS

img {
  width: 300px;
  height: 200px;
  object-fit: cover; /* 填充并裁剪 */
}

值	效果
fill	拉伸填满
contain	保持比例，完整显示
cover	保持比例，填满裁剪
none	原始尺寸
scale-down	取contain和none较小值

object-position

CSS

img {
  object-fit: cover;
  object-position: center top; /* 控制显示区域 */
}

响应式方案对比

方案	适用场景	优点
srcset	相同内容不同尺寸	简单、性能好
picture	不同裁剪或格式	灵活、art direction
CSS背景	装饰性图片	与布局配合
object-fit	固定容器图片	裁剪控制精确

要点总结

srcset + sizes实现自动分辨率切换
picture实现艺术指导和格式回退
aspect-ratio保持固定宽高比
loading="lazy"延迟加载非关键资源
object-fit控制图片/视频填充方式
移动优先断点策略更易维护

📝 发现内容有误？点击此处直接编辑