跳转至

响应式基础 — 一套 CSS,从 27 寸屏活到 5 寸屏

这一章讲一件事,分三招: 怎么让同一套代码做的页面,在手机、平板、 电脑上都成立。三招是——尺寸不写死(相对单位)、窄到一定程度换一套规则(媒体查询)、 先替小屏想(移动优先)。 读完你能写出「宽屏左右分栏、窄屏自动上下叠」的页面。 需要的基础:盒模型与 Flexbox/Grid(本拆解 05 章);rem 单位见过最好(03 章)。

1. 这一章讲什么

前五章做的页面都默认「在电脑上看」。这一章把视野扩大到所有屏幕, 它在全书链条的位置:第 ⑥ 级台阶,也是「能看」到「能用」的分界。 书里的理由一句话:如今超过一半的网页流量来自移动设备,响应式不再是可选项,而是必需1。 没有它的页面在手机上什么样?原书列了症状:字太小、图片跑出屏幕、用户只能别扭地缩放2。

2. 顶层全景:三招一条链

  第一招:相对单位   ── % / rem / vw / vh   尺寸跟着环境走,不写死
  第二招:媒体查询   ── @media (条件) { 一套规则 }   环境变了,规则跟着换
  第三招:移动优先   ── 先写小屏样式,再用媒体查询「往大里加」

  配套:图片公式 max-width: 100%; height: auto;  —— 图永远不撑破容器

  图说:前两招是技术,第三招是写代码的顺序感;图片公式是补丁。

3. 核心原理

第一招:相对单位——「多大」永远说「相对于谁」

px(像素)这类绝对单位的问题是:它无视环境。width: 300px 在 27 寸显示器上是 一小条,在 5 寸手机上可能就要横着滚。相对单位的做法是:不报到具体数, 报「占父元素的几分之几」「根字号的几倍」「屏幕宽度的百分之几」—— 基准自己会变,尺寸跟着变3。

四种相对单位,书里逐个给了定义4:

单位 相对于什么 一句话场景
% 父元素(宽对宽、高对高) width: 100% = 撑满可用宽度
em 父元素的字号 随字号缩放的内边距
rem 根元素(<html>)的字号 全局统一缩放开关,字号首选
vw / vh 视口宽/高的 1% 满屏区块、随屏缩放的大字

「视口」(viewport)当场解释: 就是浏览器窗口里真正显示网页的那块矩形区域—— 不是屏幕,是你拉开窗口后网页能占的地盘。所以 100vw = 窗口整个宽度, 100vh = 窗口整个高度。书里的满屏英雄区例子用的正是它: height: 100vh;(占满一屏)和 font-size: 5vw(字号跟着窗口宽走)5。

em 和 rem 的差别在 03 章出现过,这里落到场景上:rem 更可预测—— 它的基准永远是页面根,不会随嵌套层数变;书里给的结论也是「rem 通常更适合一致的缩放」6。 一句话记忆:em 问爸爸,rem 问祖宗;家族人多的时候,问祖宗的答案稳定。

第二招:媒体查询——「条件成立时,这套规则才生效」

媒体查询(media query)是本章的心脏:它让你写只在某些环境下生效的 CSS7。基本格式:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

拆开读:@media 是「以下规则要验环境」的开关;括号里是条件—— max-width: 768px 念作「视口宽度在 768px 及以下」; 条件成立,花括号里那套规则生效,否则整段被跳过8。

两个条件词是一对错身兄弟,别记反:

写法 成立条件 典型用途
(max-width: 768px) 768px 及以下(窄屏) 小屏专属规则
(min-width: 1024px) 1024px 及以上(宽屏) 大屏增强规则

断点(breakpoint) 这个词当场解释:「布局需要换形态的屏幕宽度」, 是设计者自己定的门槛。书里给的是当时流行的三个常用值9:

设备档 断点
手机 max-width: 480px
平板 max-width: 768px
桌面 min-width: 1024px

重要边界:这三个数是行业惯例,不是标准。 它们来自早年几款 iPhone/iPad 的屏幕宽度, 今天的设备五花八门,实际项目里要拿真机数据说话。原书把惯例列成表是让你起步有个抓手, 不是让你背成法律(这条「别当法律」是我们补的,原书未交代惯例的来历)。

第三招:移动优先——写代码的顺序感

有了媒体查询,就出现了一个顺序问题:基础样式(不带 @media 的那些)写给谁? 移动优先的回答:先写给手机——单列、小图、大字;再用 (min-width: ...) 往上加大屏的增强。 反过来叫桌面优先:先写给电脑,再用 max-width 往下修。 书里把移动优先列为响应式三要素之一10。为什么优先小屏?两条实际理由(展开是我们补的,书里只点了名):

  1. 手机是约束更狠的环境——窄、慢、指头粗。先把难处伺候好,往宽屏加东西总是容易的;
  2. 小屏样式更简单——单列布局几乎是默认形态,代码更少,地基更稳。

响应式图片:一行公式封死撑破问题

大图在小屏上最容易出事故:容器 350px 宽,图 1200px 宽,页面立刻横向滚动。 书里的公式两条声明11:

img {
  max-width: 100%;
  height: auto;
}

逐词读: max-width: 100% = 宽永远不超过容器的宽,超出就缩; height: auto = 高度随宽度等比变——缺了这条,图会被压扁或拉长。 两条一起,任何图片在任何容器里都乖巧。这是响应式里复用率最高的一行 CSS, 可以无脑用在每个项目的开头。

主线例子:分栏页面,宽屏与窄屏各走一遍

本章的主线例子是书里的「Responsive Layout」。一个容器,两个子元素:

<div class="wrapper">
  <div class="sidebar">Sidebar</div>
  <div class="content">Main Content</div>
</div>

.wrapper { display: flex; }
.sidebar { width: 25%; }
.content { width: 75%; }

@media (max-width: 768px) {
  .wrapper   { flex-direction: column; }
  .sidebar,
  .content   { width: 100%; }
}

同一套代码,两种屏幕各执行一遍:

步骤 宽屏(1200px,演示数) 窄屏(375px,演示数)
1 基础规则 flex 横排生效;侧栏 25% = 300px,正文 75% = 900px flex 横排先生效,但马上被下一步覆盖
2 媒体查询验条件 1200 > 768 → @media 段不生效 375 ≤ 768 → @media 段生效
3 覆盖后布局 维持:左 300px 侧栏 + 右 900px 正文,一行并排 flex-direction: column → 子项竖排;两者 width: 100% → 各撑满整行
4 读者看到 经典左右分栏 上下两叠,先侧栏后正文,无需横向滚动

(1200px/375px 和换算出的 300/900px 是为演示编的;「768px 以下换竖排」的规则与原书一致。) 注意「覆盖」这个词的精确含义: 窄屏时元素同时拿到两条 width—— 基础规则说 25%,媒体查询里说 100%。它们撞车了,按 01 章的层叠「更具体者赢」: 写在媒体查询里、条件当场成立的规则,覆盖外面的基础规则。 媒体查询的全部魔法就这一句。

章末还有一个把三招合流的练习「响应式卡片网格」: 桌面 grid-template-columns: repeat(3, 1fr) 三卡并排; @media (max-width: 768px) 里改 grid-template-columns: 1fr 一卡一行12—— 同一网格容器,窄屏时列数从 3 变 1,Grid 自动重新摆盘。

移动端五条细则

书里收尾给了五条实操规矩13:

  1. 正文字号 1rem 或以上;
  2. 别写死宽度(width: 300px 是反面教材),用 % 或 vw;
  3. 小屏上内容竖着叠;
  4. 媒体查询早点写、真机上测;
  5. 按钮高度至少 44px——成年人的指头尖大约就这么大,再矮就不好点了。

4. 作者的判断与证据

  • 判断:「响应式不再是可选项,而是必需。」 依据是「超过一半网页流量来自移动设备」1。 这句的数字没有给出处——方向与行业共识一致,精确比例随年份和市场波动,引用时别带数字。
  • 判断:断点表是「常用」(popular)的。 原书用词是 popular screen size cutoffs9—— 自己都没当标准,我们如实接住了这一点。
  • 判断:rem 通常更可预测6;按钮至少 44px13。经验之谈,可在真机上验证。
  • 事实性内容:四种相对单位的定义、媒体查询语法、max-width 图片公式,均可当场验证。

5. 边界与局限

  • 断点表会过时,而且原书没提它会过时。 480/768/1024 是 2010 年代中期的设备格局; 2025 年的手机早就超过 480px。机制(条件换规则)永不过时,数字只是示例—— 这也是我们把它标成「惯例」的原因。
  • min-width 与 max-width 混用的级联技巧没讲。 实战里常同时写几档 (手机一档、平板一档、桌面一档),本书只演示了「一档基础 + 一档覆盖」。
  • 容器查询(container query)没提。 它是媒体查询的近年进化版: 条件不看屏幕、看元素自己的容器宽度——2025 年已可实用,但超出这本入门册的范围。
  • 「真机测试」只说要做,没说怎么做。 具体工具(Chrome 开发者工具的设备模拟)要到第 07 章才出现。
  • 图片只解决了「不撑破」,没解决「不浪费」。 手机下载一张给 27 寸屏准备的大图,流量白花; 真正的解法(srcset 按屏给图)本书未涉及——如实在此标注。

6. 可带走的

本章主线例子,一行写完: 一套 flex 分栏(25%/75%)→ 屏幕宽于 768px 时原样并排 → 窄于 768px 时媒体查询段生效、column + 100% 覆盖旧规则 → 同一页面,宽屏横排、窄屏竖叠。

  1. 响应式三招:相对单位(不写死)+ 媒体查询(条件换规则)+ 移动优先(基础样式先写给手机);
  2. 相对单位四选:%(对父)、em(对父字号)、rem(对根字号,字号首选)、vw/vh(对视口,1 = 1%);
  3. max-width: 768px 念「768 及以下」,(min-width: ...) 是它的反义词;
  4. 断点 480/768/1024 是惯例不是标准,真项目拿自己的用户数据定;
  5. 覆盖的机理:媒体查询里条件成立的规则,按层叠盖过基础规则;
  6. 图片公式 max-width: 100%; height: auto; 每个项目开头无脑写上;
  7. 指头是 44px 粗的——按钮别矮过这个数。

7. 原文地图

主题 原书章 原文位置
响应式定义与「必需」的论证 Chapter 6: Responsive Design Basics text/07-ch06-chapter-6-responsive-design-basics.txt:13(搜「different screen sizes」) · text/07-ch06-chapter-6-responsive-design-basics.txt:23(搜「50% of web traffic」)
无响应式的症状清单 同上 text/07-ch06-chapter-6-responsive-design-basics.txt:16(搜「too small」)
三招(灵活布局/媒体查询/移动优先) 同上 text/07-ch06-chapter-6-responsive-design-basics.txt:28(搜「Flexible layouts」)
四种相对单位 同上 text/07-ch06-chapter-6-responsive-design-basics.txt:45(搜「all available space」) · text/07-ch06-chapter-6-responsive-design-basics.txt:53(搜「root」) · text/07-ch06-chapter-6-responsive-design-basics.txt:64(搜「1% of the viewport」)
rem 更可预测 同上 text/07-ch06-chapter-6-responsive-design-basics.txt:60(搜「more predictable」)
满屏英雄区 vh/vw 同上 text/07-ch06-chapter-6-responsive-design-basics.txt:71(搜「100vh」)
媒体查询语法与读法 同上 text/07-ch06-chapter-6-responsive-design-basics.txt:77(搜「certain conditions」) · text/07-ch06-chapter-6-responsive-design-basics.txt:87(搜「768 pixels wide or less」)
常用断点表 同上 text/07-ch06-chapter-6-responsive-design-basics.txt:93(搜「480px」)
主线例子:分栏与覆盖 同上 text/07-ch06-chapter-6-responsive-design-basics.txt:107(搜「wrapper」) · text/07-ch06-chapter-6-responsive-design-basics.txt:116(搜「max-width: 768px」)
响应式图片公式 同上 text/07-ch06-chapter-6-responsive-design-basics.txt:132(搜「max-width: 100%」)
移动端五条(含 44px) 同上 text/07-ch06-chapter-6-responsive-design-basics.txt:138(搜「readable font sizes」) · text/07-ch06-chapter-6-responsive-design-basics.txt:142(搜「44px」)
响应式卡片网格 同上 text/07-ch06-chapter-6-responsive-design-basics.txt:154(搜「repeat(3, 1fr)」) · text/07-ch06-chapter-6-responsive-design-basics.txt:164(搜「3 cards side-by-side」)

  1. 出处:「Chapter 6: Responsive Design Basics」第 23–24 段(text/07-ch06-chapter-6-responsive-design-basics.txt:23,搜「50% of web traffic」)。原文:「In today’s world, where over 50% of web traffic comes from mobile devices, responsive design is no longer optional — it's essential.」数字未给出来源,引用时勿带精确比例。 ↩↩

  2. 出处:「Chapter 6: Responsive Design Basics」第 15–18 段(text/07-ch06-chapter-6-responsive-design-basics.txt:16,搜「too small」)。原文三项:Text is too small on phones;Images go off-screen;Users have to zoom and scroll awkwardly。 ↩

  3. 出处:「Chapter 6: Responsive Design Basics」第 34–37 段(text/07-ch06-chapter-6-responsive-design-basics.txt:36,搜「These adjust based on」)。原文:「responsive design uses relative units. These adjust based on screen size, user preferences, and parent containers.」 ↩

  4. 出处:「Chapter 6: Responsive Design Basics」第 38–74 段(text/07-ch06-chapter-6-responsive-design-basics.txt:45,搜「all available space」;:53,搜「root」;:64,搜「1% of the viewport」)。原文:em「The font-size of the parent element」;rem「The font-size of the root (<html>) element」;vw/vh「1% of the viewport’s width / height」。 ↩

  5. 出处:「Chapter 6: Responsive Design Basics」第 68–74 段(text/07-ch06-chapter-6-responsive-design-basics.txt:71,搜「100vh」)。原文:「height: 100vh; /* Full screen height /」「font-size: 5vw; / Scales based on screen width */」 ↩

  6. 出处:「Chapter 6: Responsive Design Basics」第 60 段(text/07-ch06-chapter-6-responsive-design-basics.txt:60,搜「more predictable」)。原文:「rem is usually more predictable for consistent scaling.」 ↩↩

  7. 出处:「Chapter 6: Responsive Design Basics」第 76–78 段(text/07-ch06-chapter-6-responsive-design-basics.txt:77,搜「certain conditions」)。原文:「Media queries let you write CSS that only applies under certain conditions — like screen size.」 ↩

  8. 出处:「Chapter 6: Responsive Design Basics」第 86–87 段(text/07-ch06-chapter-6-responsive-design-basics.txt:87,搜「768 pixels wide or less」)。原文:「If the screen is 768 pixels wide or less, apply this style.」 ↩

  9. 出处:「Chapter 6: Responsive Design Basics」第 88–97 段(text/07-ch06-chapter-6-responsive-design-basics.txt:93,搜「480px」)。原文:「These are popular screen size cutoffs」——Mobile 480px、Tablet 768px、Desktop 1024px。 ↩↩

  10. 出处:「Chapter 6: Responsive Design Basics」第 27–31 段(text/07-ch06-chapter-6-responsive-design-basics.txt:28,搜「Flexible layouts」)。原文三项:Flexible layouts (using relative units like %, rem, etc.);Media queries (to apply different styles at different screen widths);Mobile-first thinking (designing for small screens first, then scaling up)。 ↩

  11. 出处:「Chapter 6: Responsive Design Basics」第 127–135 段(text/07-ch06-chapter-6-responsive-design-basics.txt:132,搜「max-width: 100%」)。原文:「This keeps images within their container and scales them appropriately.」 ↩

  12. 出处:「Chapter 6: Responsive Design Basics」第 144–164 段(text/07-ch06-chapter-6-responsive-design-basics.txt:154,搜「repeat(3, 1fr)」;:164,搜「3 cards side-by-side」)。原文:「On desktop: 3 cards side-by-side」「On mobile: 1 card per row」。 ↩

  13. 出处:「Chapter 6: Responsive Design Basics」第 137–142 段(text/07-ch06-chapter-6-responsive-design-basics.txt:138,搜「readable font sizes」;:142,搜「44px」)。原文:「Use readable font sizes (1rem or larger for body text)」「Avoid fixed widths (width: 300px) — use % or vw instead」「Leave room to tap! Make buttons at least 44px high」。 ↩↩