一、手机和桌面，已经打成平手

看访问量的实际构成（StatCounter，2026 年 8 月）：

两边的访问次数几乎一样多，但换一把尺子看就变了：按页面浏览量算，手机占 58.99%——手机用户看得更多、每次看的时间更碎。

这两组数字放在一起，是移动优先的真正理由：不是【手机用户比电脑用户多】，而是【手机用户贡献了更多次浏览，而他们的屏幕只有五分之一宽】。

这条路线在课程里出现过：第四章【智能手机的出现】那一节讲的正是移动端成为主流的过程，到第七章，它变成了上线前必须检查的一项。

二、CSS 看到的宽度，和屏幕的物理像素不是一回事

这是最容易搞错的一点。一台标称 1080 像素宽的安卓手机，CSS 眼里的宽度通常只有 360 到 414。

原因在于设备像素比（DPR）：高分屏把多个物理像素合成一个 CSS 像素，让文字和图标在肉眼尺度上保持合适大小。所以 CSS 里写的宽度，是【逻辑宽度】。

实测的常见宽度是这些：

留意手机那一列的宽度：360 到 430 之间。 所以 media query 里写 max-width: 480px 是手机查询，写 600px 就已经不是了。

还有两件影响判断的事：用户把系统缩放调到 150%，1920 的屏在浏览器眼里只剩 1280 宽；折叠屏展开后，视口可以窄到 280 像素。所以布局要按 CSS 视口写，不要按物理分辨率写。

三、断点定在哪：抄框架省事，测六个就够

断点不是拍脑袋定的，主流框架的默认值已经兼顾了设备分布：

自己定的话，下面六个宽度能覆盖八成以上的访问：

320 这一档不要跳过：无障碍规范（WCAG 2.1 第 1.4.10 条）要求内容在 320 CSS 像素宽度下不出现横向滚动——它是最小号 iPhone 的宽度，也是把 1280 的窗口放大到 400% 后的宽度，这正是低视力用户常用的浏览方式。

实现层面还有一条建议：组件内部尽量用容器查询（container query），页面级才用媒体查询。 同一个卡片组件放在侧栏和放在主区，宽度可能差一倍，按容器宽度切换样式比按屏幕宽度更准。

四、动手 Demo：手机宽度那几档，加起来覆盖多少

把四个主流手机宽度加起来看一眼——这会直接决定你的首屏该按哪个宽度做。

w = {"414": 12.7, "360": 9.23, "390": 6.71, "375": 4.23}
print("  360 + 390 = %.2f%%" % (w["360"] + w["390"]))
print("  360 + 390 + 414 = %.2f%%" % (w["360"] + w["390"] + w["414"]))
print("  四档加起来 = %.2f%%" % sum(w.values()))

实跑输出：

--------------------------------------------------------------------
屏幕尺寸——断点不是拍脑袋定的
--------------------------------------------------------------------
  手机和电脑已经打成平手（StatCounter，2026 年 8 月）：

  设备类别     访问占比
  ----------------------
  手机         49.4%
  桌面电脑     49.1%
  平板         1.5%
  ----------------------
  但【访问次数】和【页面浏览量】是两把尺子：按页面浏览算，
  手机占 58.99%——手机的人看得更多、每次看得更碎。

  真正要适配的是那一串具体宽度：

  设备     最常见尺寸      占比
  -------------------------------
  桌面     1920 × 1080     22.1%
  桌面     1366 × 768      14.2%
  桌面     1536 × 864      11.3%
  桌面     2560 × 1440     8.4%
  手机     414 × 896       12.7%
  手机     360 × 800       9.23%
  手机     390 × 844       6.71%
  手机     375 × 812       4.23%
  -------------------------------
  留意：手机那一列全是 360~430 之间的数字，无论屏幕多少物理像素，
  CSS 看到的宽度就这么大。所以【max-width: 480px】是手机查询，
  【600px】已经不是了。

  断点该定几个？抄主流框架的默认值最省事：

  框架             内置断点（CSS 像素）
  ------------------------------------------------
  Tailwind CSS     640 / 768 / 1024 / 1280 / 1536
  Bootstrap 5      576 / 768 / 992 / 1200 / 1400
  ------------------------------------------------
  再给一组【该测哪些宽度】的清单，六个就能覆盖八成以上：

  宽度            为什么要测
  -------------------------------------------------
  320             无障碍底线，WCAG 要求无横向滚动
  360 / 390       两个最常见的手机宽度，合计约 16%
  414             大屏手机，手机里的第一名
  768 / 1024      平板竖屏与横屏
  1366 / 1920     笔记本与台式机两个主力
  -------------------------------------------------
  两个容易忽略的边界：折叠屏展开后视口可以窄到 280 像素；
  高分屏上用户把系统缩放调到 150%，1920 的屏在 CSS 眼里
  只剩 1280 宽。所以布局要按 CSS 视口写，别按物理分辨率写。

看第三行：四个宽度加起来只有 32.87%。这个数字说明一件事——手机端的宽度太碎了，指望【适配两个型号】是不现实的。 所以正确的做法的不是【为每个型号做一版】，而是做一套流式布局，只在少数几档换结构。这正是断点的意义：它标记的是【布局该换形态】的位置，不是【这台设备】。 再看表里 320 那一行：它占的流量很小，但它是无障碍的硬要求。 一条横向滚动条，就能让低视力用户完全没法用。 最后记住桌面那一列：1920 占 22.1%、1366 占 14.2%——桌面端不是一种宽度，而是从 1280 到 3840 的一大片。

30 秒实验

1. 打开手机浏览器访问你自己的网站，双击放大看看有没有横向滚动条。
2. 在电脑上把浏览器窗口从最宽慢慢拖到最窄，记录布局在哪些宽度发生了明显变化。
3. 找出你手机里最常用的那个 App 网页版，看看它在 320 像素宽下还正常吗。

常见误区

1. 错误：响应式就是把页面等比缩小。——纠正：缩放解决不了可读性。 手机上要换的是结构与优先级（导航折叠、表格改卡片），不是把整个页面缩小。
2. 错误：屏幕多少像素，CSS 就是多少宽。——纠正：要看 CSS 视口。 有 DPR 和系统缩放两层折算，1080 像素的手机在 CSS 里通常只有 360 到 414 宽。
3. 错误：断点越多越细致，效果越好。——纠正：断点越多越难维护。 每个断点都是一份要单独测的布局——先按框架默认的三到五档做，遇到具体问题再加。

• ☐ 下一节（7-9 提供对不同设备的支持：媒体类型）

相关笔记

• 支持HTTPS连接的功能 —— 上一节把连接收干净
• 智能手机的出现 —— 移动端成为主流的那一段历史
• Web网页的次要部分 —— 断点写在 CSS 里
• 设计Web网页的外观 —— 样式表与设备适配的另一套讲法
• 浏览器的功能 —— 浏览器怎么把页面画出来
• 🕸️ Web技术原理 · 索引