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

关键认知:

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

为什么移动优先更好?

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

几个高价值单位:

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 个断点足够 */

实战建议:

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. 实战经验

小结

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

← 上一篇 CSS 过渡与动画

下一篇 CSS 变量 →

✈️💬