我做的第一个”响应式”网站，是用 @media 写了十几种屏幕尺寸的断点。

320px、360px、375px、414px、480px、640px、768px、1024px、1280px、1440px、1920px……

每次新增一种设备尺寸，我就要加一个断点。后来我受不了了——这不是响应式，这是穷举法。

一句话理解： 响应式设计的终极目标不是”适配所有屏幕尺寸”，而是”在任何屏幕上都能提供良好的阅读体验”。

2026 年的响应式方案

1. 流体排版：clamp() 一统江湖

1
2
3
4
5
6
7
8
9
10
/* 不需要媒体查询了 */
h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
}

.content {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.7;
  max-width: 65ch;  /* 每行不超过 65 个字符，提升可读性 */
}

2. 响应式网格：Grid + auto-fill

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 一劳永逸的响应式网格 */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* 侧边栏布局 */
.layout {
  display: grid;
  grid-template-columns: 1fr min(65ch, 100%) 1fr;
}

.layout > * {
  grid-column: 2;
}

/* 全宽元素（如图片） */
.full-width {
  grid-column: 1 / -1;
}

3. 容器查询：组件级别的响应式

容器查询是 2024 年后最值得关注的新 CSS 特性。和媒体查询不同——它根据”容器”的宽度来决定样式，而不是”视口”的宽度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 定义容器 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 容器查询 */
@container card (max-width: 400px) {
  .card {
    flex-direction: column;
  }
  .card-image {
    width: 100%;
  }
}

@container card (min-width: 401px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 200px;
  }
}

这意味着：同一个组件，放在窄的 sidebar 里和放在宽的 main 区域里，可以自动调整布局。 这是媒体查询做不到的。

4. 现代 CSS 选择器的力量

:has() 选择器让很多以前需要 JS 或额外类名的响应式方案变得简单：

1
2
3
4
5
6
7
8
9
/* 如果卡片组少于 3 个，用不同的布局 */
.card-group:has(.card:only-child) {
  grid-template-columns: 1fr;
  max-width: 400px;
}

.card-group:has(.card:nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr;
}

响应式图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- srcset + sizes：最基础的响应式图片 -->
<img
  alt="description"
  src="img-800.jpg"
  srcset="
    img-400.jpg 400w,
    img-800.jpg 800w,
    img-1200.jpg 1200w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1024px) 50vw,
    800px
  "
  loading="lazy"
  decoding="async"
>

<!-- 使用 <picture> 选择不同格式 -->
<picture>
  <source srcset="img.avif" type="image/avif">
  <source srcset="img.webp" type="image/webp">
  <img src="img.jpg" alt="" loading="lazy" width="800" height="600">
</picture>

从媒体查询到容器查询：什么时候用哪个

场景 用哪个 原因
页面整体布局 @media 布局依赖视口尺寸
可复用组件 @container 组件不知道会放在什么容器里
字体大小 clamp() 一行搞定，不需要查询
网格布局 auto-fill + minmax Grid 自带响应式能力

经验之谈： 我现在写 CSS 的顺序是：先用 clamp() 搞定字号，再用 Grid + auto-fill 搞定网格，最后用 @media 处理页面级布局问题。如果遇到需要”在窄容器里自动调整”的组件，才上 @container。尽量用更少的代码做更多的事，这才是好的 CSS。

相关推荐

P.S. 响应式设计发展到今天，经历了”百分比→媒体查询→flex/grid→容器查询”的进化。但万变不离其宗——核心是”灵活”，不是”覆盖”。 你不需要保证你的网站在每一款设备上都完美无瑕，只需要保证它在任何设备上都”可用”。这个目标的达成，用 clamp() + Grid + 容器查询 就够了。