CSS 响应式设计

用户可能用手机、平板、桌面访问你的页面,屏幕尺寸五花八门。响应式设计让同一份 HTML 在不同屏幕上都能优雅展示。核心工具是媒体查询——根据屏幕宽度,在不同区间应用不同样式。这一篇讲清断点、移动优先、相对单位这些核心概念。

1. 第一步:viewport meta(必做!)

响应式的第一步,是在 HTML 的 head 里加一行 viewport 标签。不加这行,手机浏览器会把页面按桌面宽度渲染再缩放,所有响应式样式都会失效。这是新手最常忽略的一步。

<!-- 必须在 head 里加这行,否则手机浏览器会按桌面宽度渲染 -->
<head>
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
</head>

<!-- width=device-width:视口宽度 = 设备宽度 -->
<!-- initial-scale=1:初始缩放 1,不放大不缩小 -->

每个 HTML 页面都应该有这行,几乎没有例外。

2. @media 媒体查询

媒体查询是响应式的核心武器。语法是 @media 加一对括号写条件,再跟一个花括号块——条件满足时,块里的样式才生效。

/* 媒体查询:根据屏幕宽度,在不同区间应用不同样式 */

/* 1. min-width:屏幕宽 >= 某值时生效(移动优先推荐) */
@media (min-width: 768px) {
  .container { max-width: 720px; }
}

/* 2. max-width:屏幕宽 <= 某值时生效 */
@media (max-width: 767px) {
  .container { padding: 0 12px; }
}

/* 3. 组合条件 */
@media (min-width: 768px) and (max-width: 1024px) {
  .container { max-width: 960px; }
}

/* 4. 方向:横屏 / 竖屏 */
@media (orientation: landscape) { ... }
@media (orientation: portrait)  { ... }

/* 5. 暗色模式 */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #eee; }
}

关键认知:

min-width:屏幕宽大于等于某值时生效。配合移动优先策略,这是最推荐的写法。
max-width:屏幕宽小于等于某值时生效。桌面优先策略用。
组合:用 and 连接多个条件。
不止宽度:还能查方向、暗色模式、分辨率、是否打印……响应式的应用面非常广。

3. 移动优先策略

"移动优先"是当前主流的响应式策略——先写手机端的默认样式,再用 min-width 在大屏上叠加增强样式。这样基础体验(手机端)最稳,大屏再锦上添花。

/* 移动优先:先写手机端的默认样式 */

.container {
  display: flex;
  flex-direction: column;     /* 手机:纵向单列 */
  padding: 0 12px;
}

/* 屏幕宽 >= 768px(平板):变两列 */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
    max-width: 720px;
    margin: 0 auto;
  }
}

/* 屏幕宽 >= 1024px(桌面):三列 */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

为什么移动优先更好?

手机是默认:手机用户占多数,默认样式直接覆盖大多数场景。
样式递进:大屏样式基于小屏"叠加",代码更清晰。桌面优先则要不断用 max-width "覆盖减弱",容易混乱。
性能:手机只下载必要的样式,大屏才加载增强样式。

4. 相对单位

响应式项目里,优先用相对单位而非 px——这样元素会随屏幕或字号缩放,天然适配。

/* 响应式首选相对单位 */

.box {
  /* rem:相对根字号(默认 16px) */
  font-size: 1rem;          /* = 16px */

  /* % :相对父级 */
  width: 80%;

  /* vw / vh:视口宽/高的百分比 */
  width: 50vw;              /* 视口宽度的一半 */
  min-height: 100vh;        /* 占满整个屏幕高度 */

  /* clamp:最小值 优选值 最大值(自动响应式) */
  font-size: clamp(1rem, 2.5vw, 2rem);

  /* calc:计算(混合不同单位) */
  width: calc(100% - 40px);
}

/* 媒体查询改变根字号,全站字体同比例缩放 */
@media (min-width: 768px) {
  html { font-size: 18px; }
}

几个高价值单位:

rem:相对根字号。改 html 的 font-size,全站字体同比例缩放——这是响应式字号的常用技巧。
vw / vh:视口宽/高的百分比。做全屏 Hero 区(min-height: 100vh)、视口字号(font-size: 5vw)用。
clamp(min, ideal, max):自动在两个值之间响应式变化。clamp(1rem, 2.5vw, 2rem) 让字号在手机 1rem、桌面 2rem 之间平滑过渡——一行搞定响应式标题。
calc():混合不同单位计算。calc(100% - 40px) 这种 px + % 组合,媒体查询都省了。

5. 常用断点

断点是媒体查询的"分界线",决定在哪些屏幕宽度切换布局。业内主流框架(Tailwind、Bootstrap)的断点已经形成事实标准:

/* 业内常用的断点(参考 Tailwind/Bootstrap) */

/* 手机默认 */
.container { padding: 0 16px; }

/* sm:>= 640px(大手机) */
@media (min-width: 640px) { ... }

/* md:>= 768px(平板竖) */
@media (min-width: 768px) { ... }

/* lg:>= 1024px(平板横/小桌面) */
@media (min-width: 1024px) { ... }

/* xl:>= 1280px(桌面) */
@media (min-width: 1280px) { ... }

/* 2xl:>= 1536px(大桌面) */
@media (min-width: 1536px) { ... }

/* 实际项目用 3~4 个断点足够 */

实战建议:

3~4 个断点足够:不要每个 100px 都加一个,会让代码膨胀。
断点看内容,不看设备:不要死记"768px 是 iPad",而是"内容在这个宽度开始挤了,该换布局"。
先在浏览器拖动窗口:看哪里内容开始变形,在那里加断点。比硬记设备宽度科学。

6. 响应式图片

大图在小屏上既浪费流量又拖慢首屏。响应式图片让不同屏幕加载不同分辨率的图片。

<!-- 响应式图片:不同屏幕用不同图片 -->
<picture>
  <source media="(min-width: 1024px)" srcset="hero-large.jpg">
  <source media="(min-width: 768px)"  srcset="hero-medium.jpg">
  <img src="hero-small.jpg" alt="主图">
</picture>

<!-- 让图片最大不超过容器,等比缩放 -->
<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>

另外,所有图片都应该有 max-width: 100%; height: auto,确保不会超出容器、不会变形。这是写图片的默认规矩。

7. 实战经验

Flex 和 Grid 是响应式最佳搭档:flex-wrap: wrap、Grid 的 auto-fit 能让布局自动重排,减少媒体查询。
测试要真机:Chrome 的设备模拟器只是参考,真机表现可能不同。尤其 iOS Safari 有不少怪癖。
触摸优化:按钮在手机上至少 44x44 像素(iOS 推荐),否则不好点。
少用水平滚动:手机上水平滚动体验差,优先用换行或折叠菜单。
hide-on-mobile / show-on-desktop:可以写工具类,在小屏隐藏非核心内容。

小结

响应式是现代 Web 的标配。核心:viewport meta 必加、移动优先用 min-width、相对单位优先、断点看内容不看设备、3~4 个断点足够。配合 Flex/Grid 的自动重排,响应式其实没那么难。下一篇讲CSS 变量——构建可维护样式系统的基石。

← 上一篇 CSS 过渡与动画

下一篇 CSS 变量 →

✈️💬