响应式与现代特性 — 适配屏幕与三件套¶

原书拆成第 17 章(响应式)和第 18 章(现代特性),合并讲——两章是同一个目标的两半: 让页面在任何屏幕上都像样,并且少写重复代码。前者管「按屏幕切换」,后者管「不切换也能自适应」。

1. 这一章在全书链条里的位置¶

布局(Flex/Grid)、文字、颜色、动效都就位之后,还剩一个大问题:这些东西是在多大屏幕上排的? 这一章先给「按屏幕条件换样式」的全套机制(媒体查询、视口单位),再给三样「根本不用按屏幕写多套」的现代工具(变量、calc、clamp)——后者是 2020 年代 CSS 「流式取代阶梯」的方向。

2. 顶层全景:阶梯与流水¶

阶梯式(媒体查询):   小屏样式 ──┐          ┌── 大屏样式
                             768px 切换    1200px 切换
流水式(clamp 等):    尺寸 = clamp(下限, 随屏幕连续变化, 上限) —— 不切换,平滑伸缩

图说:响应式 = 阶梯 + 流水。本章前半搭阶梯,后半引流水。

3. 核心原理:响应式的四块地基(原书第 17 章)¶

第一块:viewport meta 标签——一切的前提¶

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

没有这一行,手机浏览器会假装自己是 980px 宽的桌面窗口,把你的页面整体缩小塞进去—— 后面所有响应式写法全部失效。书里的排查金句:如果媒体查询在桌面窗口缩放时正常、真机上却失灵,八成就是忘了这行¹。它是 HTML 里写的,但服务的是 CSS——记住这个跨文件的搭档关系。

第二块:媒体查询(@media)——按条件换样式¶

/* 基础样式:手机优先 */
.container { width: 100%; }

/* 屏幕宽到 768px 及以上(平板/桌面)时追加 */
@media (min-width: 768px) {
  .container { width: 80%; }
}

读法:满足条件,里面这组规则才生效。常用条件:min-width(至少这么宽)、 max-width(至多这么宽)、orientation(横竖屏)²。「至少」和「至多」对应两种设计顺序——书里给的立场:移动优先(mobile-first), 先写小屏的基础样式,再用 min-width 一档档往大加复杂度;理由是它是行业标准做法, 且小屏需要的样式最少、渐进增强最顺³。

断点(breakpoint)就是切换发生的宽度(768、1024 这类数)。书里的纪律:别为每个手机型号设断点,按内容需要设三四个标准的(如 600、900、1200)⁴; min-width 与 max-width 别混着用,会互相打架,认准一个(建议 min-width)⁵。

第三块:视口单位——跟着窗口走的尺子¶

vw/vh:1vw = 视口宽度的 1%,1vh = 视口高度的 1%;外加 vmin/vmax(取宽高里较小/较大的那个)⁶。 height: 100vh 就是「这一屏那么高」——上一章完美居中的容器、上一章 hero 区都靠它。对比第 23 章会讲的坑:height: 100% 要求父元素先有高度,常常没反应;100vh 不需要谁先有高度。

第四块:图片响应式¶

img { max-width: 100%; height: auto; }   /* 永不超过父容器,比例不变形 */

两行是全书复用率最高的代码之一——不写它,大图就是移动端横向滚动的头号来源⁷。 object-fit 则是「图片被定死尺寸后怎么办」的答案:cover 填满裁边、contain 完整留白, 方形头像框配 cover,人脸始终居中不被拉变形⁸。

4. 核心原理:现代三件套(原书第 18 章)¶

CSS 变量:一次定义,处处引用,一处改全站换¶

:root {
  --primary-color: #3498db;
  --main-padding: 20px;
}
.button {
  background-color: var(--primary-color);
  padding: var(--main-padding);
}

变量就是样式表里的「具名值」:以 -- 开头定义,var(--名字) 引用。 :root 表示根元素(即 <html>),定义在这里全站可用⁹。它的战略价值在「换主题」:深色模式(见下)、品牌换色,改的是定义处几个值, 引用处一行不动。还可以给默认值:var(--color, blue)——变量没定义时退回 blue¹⁰。两个细节:变量区分大小写(--Main-Color 和 --main-color 是两个)¹¹; 变量的值能被子元素重新声明覆盖(作用域跟选择器走)。

/* 深色模式:检测系统偏好,只换变量值 */
@media (prefers-color-scheme: dark) {
  :root { --bg: #1a1a1a; --text: white; }
}
body { background-color: var(--bg); color: var(--text); }

这是变量的招牌应用:媒体查询只负责「换值」,页面样式照常引用变量—— 「适配」被压缩成了两行赋值¹²。

calc():混合单位的算术¶

.sidebar { width: calc(100% - 50px); }

calc() 让不同单位的数直接加减乘除——「满宽减 50px」这类「百分比配固定值」的刚需, 离开它没有顺手的写法¹³。一条铁律:+ 和 - 两侧必须有空格—— calc(100% - 50px) 能跑,calc(100%-50px) 直接失效,这是本书点名的最常见错误¹⁴。

主线例子:clamp() 一行顶三段媒体查询¶

输入:一个标题,要求「小屏别太小、大屏别太大、中间随屏幕平滑变化」。

h1 { font-size: clamp(2rem, 5vw, 4rem); }

走一遍三个参数:2rem 是下限,4rem 是上限,5vw 是「理想值」—— 随视口宽度连续变化的那个¹⁵。屏幕宽度代进去(1rem 按 16px 算,这些宽度是为演示设的):

屏宽	5vw 算出	clamp 取
320px	16px	32px(2rem,抬到下限)
768px	38.4px	38.4px(理想值生效)
1600px	80px	64px(4rem,压到上限)

小屏稳、中间滑、大屏封顶——过去要用三段 @media 阶梯做的事,一行流式语法收工¹⁶。书里的小提醒:理想值要用 vw、% 这类相对单位,clamp 才有「随屏幕变」的前提¹⁷。

逻辑属性:用「文字流向」代替「左右」¶

.card {
  padding-inline-start: 20px;   /* 文字开始的那一侧 */
}

padding-left 是物理方向(永远是左边);padding-inline-start 是逻辑方向—— 「行内文字开始的那一侧」:英文从左往右,它就是左;阿拉伯文从右往左,它就自动变右¹⁸。同族还有 block-start/end(块方向,即竖排时的上下)、inline-size/block-size(对应 width/height)。多语言站点靠这一族属性省掉整套镜像样式;单语言站点不急,但名字要知道—— 你在别的代码里撞见 margin-inline-start,它说的就是「左边距(或从右读时的右边距)」。

5. 作者的判断与证据¶

「移动优先是行业标准做法」——立场断言,带一句渐进增强的理由³。
「断点按内容需要设,别追机型」——经验断言,给了三个标准数(600/900/1200)⁴。
「min/max-width 别混用」——冲突预防断言⁵。
「calc 空格是最常见错误」——经验断言,语法事实支撑¹⁴。
「逻辑属性让布局方向无关」——能力描述,配了 LTR/RTL 对照例¹⁸。
证据类型同全书:经验断言 + 最小例子,无性能或兼容性数据。

6. 边界与局限¶

媒体查询一章只讲了 width/orientation 两个维度,没讲 prefers-reduced-motion (用户要求减弱动效,该媒查询对动效章很关键)——本书未收。
没讲容器查询(@container)——按「元素的容器宽度」而非「视口宽度」切换,正是本书结尾致谢页点名的「正在加入标准」的新特性之一;2026 年它已可实用,本书正文缺席。
变量一节没讲变量的「类型化」局限(变量是字符串级替换,不能无条件做算术)与 @property 注册——进阶用法,速查口径下省略合理。
clamp 没讲与 min()/max() 的关系(三者可互相表达)。

判断(我们的,不是书里的): 「阶梯 + 流水」的对照是这两章最好的组织方式—— 先教媒体查询(通用基础),再教 clamp(更优解),读者能自己权衡何时弃阶梯取流水。本书没替读者做这个裁决,是留白也是诚实。 如果错,会错在: 对新项目,流水式(fluid type、clamp 间距)已是很多团队默认; 若读者把媒体查询当唯一答案,会写出比需要多得多的断点——本书的移动优先纪律能兜住大部分, 但「clamp 优先、媒体查询兜底」的当代排序,要等读者自己悟。

7. 可带走的¶

viewport meta 标签是响应式的前提,真机上失灵先查它¹。
移动优先:基础样式写小屏,min-width 往大加;断点按内容设 3–4 个³⁴。
100vh = 一屏高,不依赖父级高度(对照 height: 100% 的坑)。
图片两行护体:max-width: 100%; height: auto;,定死尺寸配 object-fit: cover⁷⁸。
变量定义在 :root,一处改、全站换;区分大小写;var(--x, 兜底值)⁹¹¹。
calc() 的 +/- 两侧必须有空格¹⁴。
clamp(下限, vw 理想值, 上限) 一行做流式字号——记住 320/768/1600 那组演算¹⁵。
padding-inline-start 们 = 方向无关的左右,多语言站点的省事钥匙¹⁸。

8. 原文地图¶

主题	原书章	原文位置
响应式定义	Chapter 17: Responsive Design	`text/18-ch01-1-chapter-overview.txt:7`(搜「any device」)
viewport meta 标签	同上	`text/18-ch01-1-chapter-overview.txt:25`(搜「meta tag」)
媒体查询语法与条件	同上	`text/18-ch01-1-chapter-overview.txt:30`(搜「Media Queries」)
移动优先示例	同上	`text/18-ch01-1-chapter-overview.txt:46`(搜「Base styles for mobile」)
vw/vh 定义	同上	`text/18-ch01-1-chapter-overview.txt:56`(搜「Units relative to the size」);`:60` 搜「1% of the viewport」
响应式图片两行	同上	`text/18-ch01-1-chapter-overview.txt:90`(搜「Never wider」)
object-fit	同上	`text/18-ch01-1-chapter-overview.txt:75`(搜「object-fit」)
真机失灵的排查	同上	`text/18-ch01-1-chapter-overview.txt:131`(搜「real phone」)
别追机型设断点	同上	`text/18-ch01-1-chapter-overview.txt:135`(搜「specific phone model」)
变量语法与 :root	Chapter 18: Modern CSS Features	`text/19-ch01-1-chapter-overview.txt:29`(搜「Custom Properties」);`:35` 搜「:root」
calc 运算符与空格	同上	`text/19-ch01-1-chapter-overview.txt:49`(搜「calc」);`:64` 搜「spaces」
clamp 三参数	同上	`text/19-ch01-1-chapter-overview.txt:66`(搜「clamp」);`:76` 搜「font-size: clamp」
逻辑属性 LTR/RTL	同上	`text/19-ch01-1-chapter-overview.txt:81`(搜「Logical Properties」);`:96` 搜「Arabic」
深色模式变量	同上	`text/19-ch01-1-chapter-overview.txt:100`(搜「Dark Mode」)
变量兜底值与大小写	同上	`text/19-ch01-1-chapter-overview.txt:132`(搜「fallback」);`:134` 搜「case-sensitive」

出处:「Chapter 17: Responsive Design」(text/18-ch01-1-chapter-overview.txt:131,搜「real phone」)。原文:「If your media queries work when resizing a desktop browser but fail on a real phone, you likely forgot the <meta name="viewport"> tag in your HTML <head>.」 ↩↩
出处:「Chapter 17: Responsive Design」(text/18-ch01-1-chapter-overview.txt:30,搜「Media Queries」)。原文列出的常用条件:min-width、max-width、orientation(portrait or landscape)。 ↩
出处:「Chapter 17: Responsive Design」(text/18-ch01-1-chapter-overview.txt:21,搜「Mobile-First」;:145 搜「industry standard」)。原文:「Mobile-first design (using min-width) is the industry standard approach.」 ↩↩↩
出处:「Chapter 17: Responsive Design」(text/18-ch01-1-chapter-overview.txt:135,搜「specific phone model」)。原文:「Don't try to target every specific phone model. Use a few standard breakpoints (e.g., 600px, 900px, 1200px) based on your content's needs.」 ↩↩↩
出处:「Chapter 17: Responsive Design」(text/18-ch01-1-chapter-overview.txt:137,搜「Logic Overlap」)。原文:「Be careful not to let min-width and max-width queries fight each other. Usually, sticking to one (preferably min-width) makes life easier.」 ↩↩
出处:「Chapter 17: Responsive Design」(text/18-ch01-1-chapter-overview.txt:56,搜「Units relative to the size」)。原文:「vw: 1% of the viewport's width. vh: 1% of the viewport's height. vmin: 1% of the viewport's smaller dimension. vmax: 1% of the viewport's larger dimension.」 ↩
出处:「Chapter 17: Responsive Design」(text/18-ch01-1-chapter-overview.txt:90,搜「Never wider」)。原文:「Standard Responsive Image CSS: img { max-width: 100%; /* Never wider than its parent / height: auto; / Maintain aspect ratio */ }」 ↩↩
出处:「Chapter 17: Responsive Design」(text/18-ch01-1-chapter-overview.txt:75,搜「object-fit」)。原文:cover「Fills the area, clipping the image if necessary」;contain「Shows the whole image, leaving empty space if necessary」;示例注释「Keeps the face centered without stretching」。 ↩↩
出处:「Chapter 18: Modern CSS Features」(text/19-ch01-1-chapter-overview.txt:29,搜「Custom Properties」;:35 搜「:root」)。原文语法:--variable-name: value;(声明)与 var(--variable-name)(使用);「Variables are usually defined in the :root selector for global access.」 ↩↩
出处:「Chapter 18: Modern CSS Features」(text/19-ch01-1-chapter-overview.txt:132,搜「fallback」)。原文:「You can provide a fallback value in case a variable isn't defined: var(--color, blue).」 ↩
出处:「Chapter 18: Modern CSS Features」(text/19-ch01-1-chapter-overview.txt:134,搜「case-sensitive」)。原文:「CSS variables are case-sensitive. --Main-Color is different from --main-color.」 ↩↩
出处:「Chapter 18: Modern CSS Features」(text/19-ch01-1-chapter-overview.txt:100,搜「Dark Mode」)。原文模式:在 @media (prefers-color-scheme: dark) 里重定义 --bg、--text,body 照常 var() 引用。 ↩
出处:「Chapter 18: Modern CSS Features」(text/19-ch01-1-chapter-overview.txt:49,搜「calc」)。原文:「Performs mathematical calculations to determine property values. Operators: +, -, *, /」,示例注释「Set width to 100% minus a fixed 50px margin」。 ↩
出处:「Chapter 18: Modern CSS Features」(text/19-ch01-1-chapter-overview.txt:64,搜「spaces」;:130 搜「most common error」)。原文:「You must have spaces around the + and - operators (e.g., calc(100% - 10px) works, but calc(100%-10px) fails).」 ↩↩↩
出处:「Chapter 18: Modern CSS Features」(text/19-ch01-1-chapter-overview.txt:66,搜「clamp」)。原文语法:clamp(minimum, preferred, maximum),「Clamps a value between an upper and lower bound, allowing for fluid responsive sizes.」 ↩↩
出处:「Chapter 18: Modern CSS Features」(text/19-ch01-1-chapter-overview.txt:76,搜「font-size: clamp」;:79 搜「stops growing」)。原文示例注释「Stay at 2rem, but grow to 5vw, and never exceed 4rem」,输出解释:「On small screens, the font stays at 2rem. On medium screens, it scales with the viewport. On huge screens, it stops growing at 4rem.」文中的三段屏宽演算(320/768/1600 → 32/38.4/64px)是为演示代入的数。 ↩
出处:「Chapter 18: Modern CSS Features」(text/19-ch01-1-chapter-overview.txt:136,搜「relative unit」)。原文:「For clamp() to work effectively, the 'preferred' value should use a relative unit like vw or %.」 ↩
出处:「Chapter 18: Modern CSS Features」(text/19-ch01-1-chapter-overview.txt:81,搜「Logical Properties」;:96 搜「Arabic」)。原文:「In English (LTR), this adds padding to the left. In Arabic (RTL), it automatically moves the padding to the right.」 ↩↩↩