正在加载...

CSS 响应式设计

响应式 Flex 与响应式 Grid 展示了断点上的布局技巧。响应式设计是更大图景：同一站点在手机、平板与宽屏上保持可读 — 无需维护两份 HTML。本课建立习惯；媒体查询、断点与响应式图片将在后续深入。

响应式设计工具箱

📊 响应式设计一览

部件	日常作用
Viewport meta	告诉移动浏览器使用设备宽度，而非假桌面列
流式容器	`width: 100%` + `max-width` + 侧内边距 — 可读行宽
相对单位（`rem`、`%`、`em`）	typography 与间距随设置与上下文缩放
弹性图片	`max-width: 100%` 避免媒体溢出窄屏
单一 HTML 树	相同 landmark；CSS 承担布局变化
媒体查询（下一课）	视口匹配时应用规则变更

固定宽度页面在手机上缩放或横向滚动会挫败用户。响应式设计接受任意宽度， calmly 调整间距、列与字体 — 需要时使用已练过的 Flex 与 Grid。

Viewport meta — 移动浏览器需要提示

没有 <meta name="viewport" content="width=device-width, initial-scale=1"> 时，许多手机先按桌面宽度渲染再缩小。在 <head> 放一次，再用 CSS 样式。

响应式 CSS 的 viewport

html

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>

Mobile-first 与 desktop-first

Mobile-first 先写窄屏基础样式，再用 min-width 媒体查询增强大屏。Desktop-first 从宽屏起步，用 max-width 收紧 — 与响应式 Flex/Grid 类似。只要一次改一层两者皆可；每个项目选一种习惯并坚持。

Mobile-first 基础（稍后增强）

css

body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 1rem;
}

/* 媒体查询课在此添加 min-width 规则 */

流式居中容器

全宽加 max-width 上限与水平 padding，内容不贴边。在选 Flex/Grid 分栏前即可使用。

流式容器

css

.page-wrap {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}

排版与间距的相对单位

rem 绑定根字号 — 适合标题与 gap。% 适合父级内宽度。不必一切 px 写死，相对比例在缩放时更稳。

相对排版

css

:root {
font-size: 100%;
}

h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem;
}

.lead {
font-size: 1.125rem;
max-width: 40rem;
}

弹性图片与媒体

比视口更宽的位图会导致横向滚动。简单防护：display: block、max-width: 100%、height: auto。

随列收缩的图片

css

img,
video {
display: block;
max-width: 100%;
height: auto;
}

稳健的响应式习惯

单一 HTML 树。Viewport meta 就位。先流式容器与相对单位。列需 reflow 时用响应式 Flex/Grid — 不要第二个「仅移动」站点。写下断点计划；媒体查询课讲语法。

自己动手

在示例页确认 viewport meta。
用带 max-width 与侧 padding 的流式容器包裹内容。
正文用 rem 并测试浏览器缩放。
在图库页加弹性图片规则。
列出仍需要媒体查询的布局 — 留到下一课。

常见错误

每个 wrapper 固定 px 宽度
单独 m.example.com 而非单树上的响应式 CSS
忘记 viewport meta，移动像「缩小版桌面」
大图无 max-width: 100% 导致横滚
以为本 intro 取代媒体查询、断点与响应式图片课

小结

响应式设计让单一 HTML 适配多种视口
Viewport meta + 流式容器 + 相对单位 = 基础
Mobile-first/desktop-first 是起点；媒体查询应用变化
响应式 Flex/Grid 是此思路中的工具
下一课：媒体查询

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓

问题

🎯

70%

及格要求

♾️

∞

时间

🔄

∞

尝试次数

📝 说明

仔细阅读每个问题
为每个问题选择最佳答案
您可以随时重新参加测验
您的进度将显示在顶部

语言