本教程共 44 篇 · 第 40 篇 · 更新于 2026-07-29 · 约 12 分钟阅读

40. 响应式设计基础

本节目标：理解响应式设计的核心概念，掌握 viewport 设置和媒体查询语法，能够实现基础的屏幕适配。

响应式 Web 设计（RWD）让网页在不同尺寸的屏幕上都能良好展示。核心思路：不固定宽度，让布局根据屏幕自动调整。

viewport：视口

移动端浏览器默认会把页面缩放到一个较宽的虚拟视口（通常 980px），然后再缩小显示。这导致文字很小，需要手动缩放。

在 HTML 的 <head> 中添加这行代码，就能让视口宽度等于设备宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

属性	含义
`width=device-width`	视口宽度等于设备屏幕宽度
`initial-scale=1.0`	初始缩放比例为 1（不缩放）
`maximum-scale=1.0`	禁止用户缩放（可选，通常不建议）
`user-scalable=no`	禁止用户缩放（可选，通常不建议）

所有响应式页面都必须有 viewport meta 标签。没有它，媒体查询在移动端不会按预期工作。

媒体查询语法

媒体查询（Media Query）是响应式的核心技术。它根据设备特性应用不同的 CSS。

@media 媒体类型 and (特性) {
  /* 满足条件时应用的 CSS */
}

/* 屏幕宽度小于等于 768px 时应用 */
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      padding: 20px;
      background: #3498DB;
      color: white;
      font-size: 20px;
      text-align: center;
    }
    @media screen and (max-width: 600px) {
      body {
        background: #E74C3C;
      }
    }
  </style>
</head>
<body>
  <p>调整浏览器窗口大小查看效果</p>
</body>
</html>

媒体类型

类型	说明
`all`	所有设备（默认）
`screen`	电脑、手机、平板屏幕
`print`	打印模式
`speech`	屏幕阅读器

实际开发中主要用 screen，也可以省略不写（默认就是 all）。

常用特性

特性	说明
`min-width`	视口宽度 >= 该值时生效
`max-width`	视口宽度 <= 该值时生效
`min-height`	视口高度 >= 该值时生效
`max-height`	视口高度 <= 该值时生效
`orientation: portrait`	竖屏
`orientation: landscape`	横屏

/* 横屏时 */
@media (orientation: landscape) {
  .hero { flex-direction: row; }
}

/* 竖屏时 */
@media (orientation: portrait) {
  .hero { flex-direction: column; }
}

断点：最常用的屏幕尺寸

断点（breakpoint）是媒体查询生效的临界值。没有绝对标准，但常用的有：

/* 超小设备（手机竖屏） */
@media (max-width: 575px) { ... }

/* 小设备（手机横屏） */
@media (min-width: 576px) and (max-width: 767px) { ... }

/* 中等设备（平板） */
@media (min-width: 768px) and (max-width: 991px) { ... }

/* 大设备（笔记本） */
@media (min-width: 992px) and (max-width: 1199px) { ... }

/* 超大设备（台式机） */
@media (min-width: 1200px) { ... }

现代开发更推荐”移动优先”策略：先写手机样式，再用

逐步增强到大屏。

移动优先 vs 桌面优先

桌面优先（max-width）：

/* 默认：桌面样式 */
.container { width: 1200px; }

/* 平板 */
@media (max-width: 991px) {
  .container { width: 100%; }
}

/* 手机 */
@media (max-width: 767px) {
  .container { padding: 10px; }
}

移动优先（min-width）：

/* 默认：手机样式 */
.container { width: 100%; padding: 10px; }

/* 平板 */
@media (min-width: 768px) {
  .container { width: 750px; padding: 0; }
}

/* 桌面 */
@media (min-width: 992px) {
  .container { width: 970px; }
}

/* 大屏 */
@media (min-width: 1200px) {
  .container { width: 1170px; }
}

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 移动优先：默认是单列 */
    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 16px;
    }
    .card {
      padding: 20px;
      background: #3498DB;
      color: white;
      border-radius: 8px;
    }

    /* 平板：两列 */
    @media (min-width: 768px) {
      .grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* 桌面：三列 */
    @media (min-width: 992px) {
      .grid { grid-template-columns: repeat(3, 1fr); }
    }
  </style>
</head>
<body>
  <div class="grid">
    <div class="card">卡片 1</div>
    <div class="card">卡片 2</div>
    <div class="card">卡片 3</div>
    <div class="card">卡片 4</div>
  </div>
</body>
</html>

移动优先是行业趋势。原因：移动端代码更简洁，大屏通过媒体查询增强；Google 也优先索引移动端页面。

条件组合

多个条件可以用 and 组合，也可以用逗号分隔表示”或”：

/* 同时满足两个条件 */
@media (min-width: 768px) and (max-width: 1024px) { ... }

/* 满足任一条件即可（或） */
@media (max-width: 600px), (orientation: portrait) { ... }

/* 排除某个条件 */
@media not all and (monochrome) { ... }

在 link 标签中使用媒体查询

<!-- 打印时才加载 -->
<link rel="stylesheet" href="print.css" media="print">

<!-- 屏幕宽度 >= 768px 时才加载 -->
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 768px)">

用 link 媒体查询可以减少不必要的 CSS 加载。但即使不加载，HTML 里引用的样式文件在匹配时仍会应用。

响应式设计三要素

要素	说明
viewport 标签	让页面宽度等于设备宽度
媒体查询	根据屏幕尺寸应用不同样式
弹性布局	使用相对单位（%、fr、flex）代替固定像素

三者缺一不可。viewport 是前提，媒体查询是工具，弹性布局是基础。

响应式属性速查

属性/概念	作用
`viewport` meta	设置视口宽度
`@media`	媒体查询语法
`min-width`	最小宽度断点
`max-width`	最大宽度断点
`orientation`	屏幕方向
`resolution`	设备分辨率
`hover`	是否支持悬停
`prefers-color-scheme`	系统深色模式

调试响应式设计时，Chrome DevTools 的设备模式非常有用。按 F12，点击设备图标，可以模拟各种手机和平板尺寸。