编程语言研究书库
HTML/CSS/JavaScript Web 开发

响应式设计 — 一份代码,从手机到 4K 屏

响应式设计 — 一份代码,从手机到 4K 屏

这一章讲一件事:怎么让你写的同一个页面,在 375 像素的手机和 3840 像素的 4K 屏上都成立。 武器有四件:媒体查询(按屏幕条件换样式)、移动优先(先小屏再大屏的写法纪律)、 三个计算函数(calc()/min()/max(),让尺寸会算术)、设备模拟测试(在电脑里假装成手机)。 这一章是第 08 章 grid 骨架的续集——同一个例子,这一次让它动起来。

1. 先看现象:同一个网页,三种长相

你在手机上打开一个没做响应式的老网站:字小得要用两指放大,页面宽出屏幕,左右来回拖。 再打开一个做过响应式的:单列、大字、上下滑动——内容一模一样,布局完全不同。 响应式设计(responsive design)就是后者的做法:不为每种设备各做一版网站, 而是做一份会自己调整的布局——内容随屏幕尺寸重新排布(reflow)1。

书里给的定义很完整:同一布局根据用户屏幕尺寸动态调整,内容可能移位、缩放、重排; 桌面上三四列的布局,在手机上塌缩成单列竖排,不用缩放、不用横向滚动2。 「不用缩放、不用横向滚动」这十个字就是验收标准——用户拿着手机能不能直接用,是响应式唯一的判据。

为什么这件事在 2026 年是「默认」而不是「加分项」?因为全球网页流量的大头早就是手机了(④ 类通用知识,不在书里); 一个手机上不可用的网站,等于对多数访客关门。这一章教的就是关门前最后一道锁怎么上。

2. 顶层全景:媒体查询是总开关

整套响应式的机制核心只有一个语法:

  @media (条件) {
      /* 只有条件成立,这段 CSS 才生效 */
  }

  最常见的条件:屏幕宽度 min-width / max-width(断点 breakpoint)

  @media (max-width: 576px) { … }            ← 屏幕 ≤576px 时生效(“小屏专用”)
  @media (min-width: 577px) and (max-width: 991px) { … }  ← 577–991px 生效(“平板档”)
  (没写媒体查询的样式 = 默认档,所有屏幕都生效)

  图说:样式从“一份通用的 + 几份按屏宽加码的”叠起来;断点就是加码的分界线。

@media 的意思是:括号里的条件为真,块里的规则才参与层叠3。 于是同一份 .css 文件里,你可以为不同屏幕写不同布局,浏览器自己按当前窗口宽度挑着用。

3. 断点怎么选:min-width 与 max-width 的方向之争

min-width(宽度至少多少)和 max-width(宽度最多多少)都能当条件, 但书里点破了它们背后的两种工作方式4:

你先用 min-width(从小往大)你先用 max-width(从大往小)
默认样式 = 手机版;媒体查询里为平板、桌面加码默认样式 = 桌面版;媒体查询里为小屏删改
移动优先(mobile-first)桌面优先(desktop-first)

书里推荐、也是这一行主流的做法:移动优先——先为小屏写,再逐级放大5。 为什么?三个理由(前两个书里有,第三个是我们的补充):

  1. 手机上资源紧张:下载速度和存储都受限,移动优先逼你先做减法,核心内容先立住5;
  2. CSS 的层叠天然适合「加码」:默认规则全体生效,媒体查询里写覆盖规则——「由简入繁」顺着层叠的机制, 「由繁入简」则处处要写反向规则,麻烦且容易漏;
  3. (补充)小屏是最难的设计:屏幕越小,越考验取舍;先把最难的解决了,大屏只是放宽。

4. 主线例子:那个 grid 骨架的三档人生

这一章的主线例子,就是第 08 章的餐厅页面骨架(header/nav/main/aside/footer)在三种屏幕下的三种排法。 这是原书的实战演示,数字全是书里的:

  默认档(不写媒体查询,此处为移动优先写法 = 手机):
      body { grid-template-columns: 1fr; }              ← 单列
      header/nav/main/aside/footer 各占 grid-column: 1 / 2,纵向堆叠

  平板档 @media (min-width: 577px) and (max-width: 991px):
      body { grid-template-columns: 1fr 1fr; }          ← 两列
      header/nav/footer: grid-column: 1 / 3(通栏)
      main: 1 / 2(左列) aside: 2 / 3(右列)            ← 内容栏和边栏并排

  桌面档 @media (min-width: 992px):
      grid-template-columns: 1fr 1fr 1fr 1fr;           ← 四列
      header/nav/footer 通栏,main 占前三列,aside 占最后一列

注意这套写法的优雅之处:HTML 一个标签没动。 变的只是 CSS 里网格的定义和几条 grid-column 起止线—— 第 08 章说的「grid 结构 + 媒体查询重排」就是这个意思。这正是响应式想达到的状态: 同一批内容,不同的天气,不同的穿法。

断点数字(576 / 991 / 992)不是天条,是经验值:书里那张设备分辨率表给了它们的来历—— 常见手机 360–414 宽,平板 768–1024,桌面 1366 起6。选断点要看内容在哪「撑不住」而不是背设备表: 某个宽度下导航挤爆了、某行字换行难看了,那里就是断点。书用 576/992 是教学示范,真实项目以自己的内容为准(④ 类经验补充)。

5. 三个会算术的函数:calc()、min()、max()

媒体查询是「按屏宽切换规则」;这三个函数是「让尺寸自己会算」——很多本该写媒体查询的地方, 一行函数就解决了7:

calc():混合单位的加减乘除。 width: calc(100% - 40px) = 「父容器全宽,减 40 像素」8。 为什么需要它?% 是相对父级的、px 是绝对的,两种单位平时不能直接相加; calc 开了这个口子。场景:侧边栏「占满剩余宽度」、容器「全宽但两侧各留 20px」。

min():取小的那个,给尺寸设「上限」。 width: min(400px, 80%) = 「80% 和 400px 谁小用谁」9: 屏幕窄时(80% < 400px)跟着屏幕走,屏幕宽时封顶 400px。一行代替了过去「媒体查询 + 两条 width」的写法。

max():取大的那个,给尺寸设「下限」。 width: max(60%, 200px) = 「60% 和 200px 谁大用谁」10: 屏幕再窄也保证有 200px,宽了才放开到 60%。

  min(400px, 80%):宽屏封顶 400,窄屏跟着走   ← “再宽也别超过……”
  max(60%, 200px):窄屏保底 200,宽屏放开    ← “再窄也别小于……”

  图说:min 是天花板,max 是地板——名字记反了是这两函数最常见的错,记住:min( )给的是上限!

6. 移动优先实战:三行媒体的递增

书里把移动优先完整走了一遍11:默认 CSS 是手机版(单列、纵向); 第一条 @media (min-width: 768px) 为平板加码;第二条 @media (min-width: 1024px) 为桌面加码。 浏览器窗口从窄拉到宽,你会看着布局从手机样→平板样→桌面样逐级「升级」12。 这就是为什么叫 mobile-first:不是「也支持手机」,而是「从手机开始长出来」。

7. 怎么测:开发者工具的设备模拟

响应式最大的工程难题是:你只有一台电脑,却要代表几十种设备。 书给的答案是开发者工具(第 03 章那台 X 光机)里的设备工具栏(device toolbar): F12 → 点那个手机+平板样子的图标 → 顶部出现一条设备栏,可以选预设设备(iPhone、iPad、Galaxy), 也可以手动输入任意宽高13。页面在模拟尺寸下重新渲染,触摸事件也被模拟—— 一台电脑假装整个设备库。 书里的测试清单还给了按档验证的要点:手机档导航竖排居中、 平板档导航横排、桌面档导航右对齐14。

判断(我们的,不是书里的): 设备模拟是「开发时的烟测」,不是验收。 真机上还有模拟器给不了的东西:真实触屏的手感、系统字体的差异、 Safari 的怪癖(第 01 章引擎表的现实后果)。 这一行的惯例是:开发用模拟器,发布前找两台真机(一台 iPhone、一台安卓)过一遍。 如果错,会错在: 随着浏览器一致性越来越好,真机差异在缩小——但「Safari 有自己的想法」 截至 2026 年依然是每月都能撞见的事实,这道工序省不得。

8. 作者的判断与证据

书内作为事实给出的: 媒体查询的生效机制3、min/max-width 与两种设计方向的对应4、 移动优先的定义与理由5、三个函数的取大取小语义910、设备模拟的操作路径13。

作者的推荐(行业经验,书当做法直接给): 576/991/992 的断点值、那批代表设备及其分辨率6、 移动优先优于桌面优先。这些在 2026 年是主流共识,但不是规范——真实项目的断点应由内容决定。

书里没讲、但必须知道的: <meta viewport>(第 03 章)和本章的关系——没有那行 meta, 手机浏览器会假装自己是 980px 宽的桌面屏,媒体查询量到的「宽度」就全是假的; 媒体查询量的永远是视口宽度,而视口宽度由那行 meta 决定。这两件事是一根绳上的两端。

9. 边界与局限

  • 断点表是 2024–2026 年的快照。 设备分辨率年年变(折叠屏、平板手机 hybrid),背表不如学方法。
  • 没讲容器查询(container queries)。 2023 年后落地的重磅特性:按「容器」宽度而不是视口宽度切换—— 组件真正独立于页面环境。本书出版时它尚新,入门教材跳过合理,但你要知道它存在。
  • 图片的响应式没讲。 srcset/sizes(按屏给不同图)这一大块空缺——第 05 章的懒加载只管时机, 不管尺寸适配;真实项目两个都要。
  • 「触摸友好」(按钮多大才够手指点)没展开,只在测试清单里若隐若现。

10. 可带走的

全章主线例子,一行写完: 同一个 grid 骨架,默认档单列(手机)、577–991px 两列(平板)、≥992px 四列(桌面)——HTML 不动,只换网格定义和起止线。

  1. 响应式的验收标准一句话:手机上不缩放、不横滚、直接用;
  2. @media (条件) { … }:条件成立,块里规则才生效3;
  3. min-width = 「至少这么宽」,配移动优先(默认小屏,逐级加码);max-width = 「最多这么宽」,配桌面优先4;
  4. 移动优先是主流:先做减法立住核心,再随屏宽加码,CSS 层叠机制顺着你5;
  5. 断点看内容「撑不住的地方」,不背设备表;576/992 是示范不是天条;
  6. calc() 混单位;min() 给上限(再宽不超);max() 给下限(再窄不小于)——min 是天花板,名字最易记反;
  7. 测试用开发者工具的设备工具栏,但发布前必须过真机13;
  8. 媒体查询的根是第 03 章那行 <meta viewport>——没有它,一切媒体查询都是量的假宽度。

11. 原文地图

主题原书章原文位置
响应式设计的定义Responsive Design with CSStext/15-fm-introduction.txt:31(搜「known as responsive design」)
单列塌缩的例子Responsive Design with CSStext/15-fm-introduction.txt:33(搜「collapse into a single-column」)
@media 的生效机制Responsive Design with CSStext/15-fm-introduction.txt:51(搜「@media rule includes」)
min/max-width 与设计方向Responsive Design with CSStext/15-fm-introduction.txt:53(搜「min-width or max-width」)
设备分辨率表Responsive Design with CSStext/15-fm-introduction.txt:59(搜「Screen resolution」)
手机档媒体查询Responsive Design with CSStext/15-fm-introduction.txt:133(搜「max-width: 576px」)
平板档媒体查询Responsive Design with CSStext/15-fm-introduction.txt:185(搜「min-width: 577px」)
移动优先的定义Responsive Design with CSStext/15-fm-introduction.txt:223(搜「mobile-first」)
逐级加码的写法Responsive Design with CSStext/15-fm-introduction.txt:231(搜「progressively scale」)
设备工具栏测试Responsive Design with CSStext/15-fm-introduction.txt:245(搜「toggle device toolbar」)
calc()Responsive Design with CSStext/15-fm-introduction.txt:287(搜「calc() performs calculations」)
min()Responsive Design with CSStext/15-fm-introduction.txt:297(搜「min() function is often」)
max()Responsive Design with CSStext/15-fm-introduction.txt:307(搜「max() function is used」)
章末总结:移动优先价值观Responsive Design with CSStext/15-fm-introduction.txt:319(搜「mobile-first approach」)

Footnotes

  1. 出处:「Responsive Design with CSS」第 31 段(text/15-fm-introduction.txt:31,搜「known as responsive design」)。原文:「Adapting a website to function and appear correctly across various screen sizes is a fundamental principle of modern web development known as responsive design.」 ↩

  2. 出处:「Responsive Design with CSS」第 33 段(text/15-fm-introduction.txt:33,搜「collapse into a single-column」)。原文:「a multi-column desktop layout may collapse into a single-column vertical structure on a mobile device to ensure readability and usability without requiring zooming or horizontal scrolling.」 ↩

  3. 出处:「Responsive Design with CSS」第 51 段(text/15-fm-introduction.txt:51,搜「@media rule includes」)。原文:「The @media rule includes a block of CSS properties only if a certain condition is true.」 ↩ ↩2 ↩3

  4. 出处:「Responsive Design with CSS」第 53 段(text/15-fm-introduction.txt:53,搜「min-width or max-width」)。原文:「if you are designing your layout for small smartphone screens first, then use min-width breakpoints and work your way up... use max-width and work your way down to the smallest screen.」 ↩ ↩2 ↩3

  5. 出处:「Responsive Design with CSS」第 223 段(text/15-fm-introduction.txt:223,搜「mobile-first」)。原文:「a design strategy that focuses on building websites specifically for mobile devices, then adapting them to larger screens... where download speeds and storage space are often limited.」 ↩ ↩2 ↩3 ↩4

  6. 出处:「Responsive Design with CSS」第 55–117 段(text/15-fm-introduction.txt:59,搜「Screen resolution」)。表中列出手机(360–414 宽)、平板(768–1024)、桌面(1366–1920)、大屏桌面(3840)各档代表设备。 ↩ ↩2

  7. 出处:「Responsive Design with CSS」第 281 段(text/15-fm-introduction.txt:281,搜「built-in functions」)。 ↩

  8. 出处:「Responsive Design with CSS」第 287–291 段(text/15-fm-introduction.txt:287,搜「calc() performs calculations」;:291,搜「combine different units」)。 ↩

  9. 出处:「Responsive Design with CSS」第 297–303 段(text/15-fm-introduction.txt:297,搜「min() function is often」)。原文:「It will choose the smaller of the two values in the parentheses.」 ↩ ↩2

  10. 出处:「Responsive Design with CSS」第 307–313 段(text/15-fm-introduction.txt:307,搜「max() function is used」)。原文:「The max() function selects the greater value between the specified options.」 ↩ ↩2

  11. 出处:「Responsive Design with CSS」第 225–231 段(text/15-fm-introduction.txt:227,搜「smallest viewports」;:231,搜「progressively scale」)。 ↩

  12. 出处:「Responsive Design with CSS」第 239 段(text/15-fm-introduction.txt:239,搜「below 768 pixels」)。原文:「When the browser width is below 768 pixels, the mobile view is seen... over 1024 pixels, you see the desktop layout.」 ↩

  13. 出处:「Responsive Design with CSS」第 245–251 段(text/15-fm-introduction.txt:245,搜「toggle device toolbar」)。原文:「choose from the pre-defined device options (like iPhone, iPad, Galaxy, etc.) or manually adjust the width and height.」 ↩ ↩2 ↩3

  14. 出处:「Responsive Design with CSS」第 253–275 段(text/15-fm-introduction.txt:253,搜「vertical navigation menu」;:265,搜「horizontal layout」;:271,搜「aligned to the right」)。 ↩

CSS 布局 — 定位、flexbox、grid 与长度单位

Previous Page

表单与按钮的样式 — 把默认件打磨成设计件

Next Page

On this page

响应式设计 — 一份代码,从手机到 4K 屏1. 先看现象:同一个网页,三种长相2. 顶层全景:媒体查询是总开关3. 断点怎么选:min-width 与 max-width 的方向之争4. 主线例子:那个 grid 骨架的三档人生5. 三个会算术的函数:calc()、min()、max()6. 移动优先实战:三行媒体的递增7. 怎么测:开发者工具的设备模拟8. 作者的判断与证据9. 边界与局限10. 可带走的11. 原文地图Footnotes