断点在内容开始难读处设立而非按设备尺寸
别名: 内容断点 · device breakpoint · 设备宽度 · readable threshold
概念解释
断点是布局规则发生切换的宽度，不是一份手机 / 平板 / 桌面的产品目录。375、768、1024 描述的是某年某款设备的出货宽度，不是这份内容开始难读的位置。行长超出舒适字数、表格列压到放不下标签、导航项开始重叠或截断——失败发生在具体的像素上。断点应设在这些失败刚刚出现之前，所以不同模块可以、也常常必须有不同的断点值。
它回答的是「在哪一条宽度切布局」，不是「该不该用容器查询代替视口」，也不是「少设几个断点让内容自己流」。设备名不能当尺子。
机制
难读是内容度量撞上可用宽度的结果。正文字号与行高决定一行能容纳多少字；超过大约 60–80 个西文字符或中文对应的行长，阅读扫视开始掉行。多列数据表的最小列宽加起来超过容器，单元格不是换行就是溢出。导航是一排不能丢的项，项宽之和大于容器时开始重叠。这些阈值由字体、文案、列数决定，与「是不是 iPad」无关。把断点钉在设备宽度上，等于假设所有模块在同一像素同时坏掉——标题可能还宽裕，表格已经碎了。
因此尺子是这份内容的失败点。把视口（或容器）从宽拖到窄，记下每个模块从「可读、可点、不重叠」掉到「开始坏」的宽度，切点放在该宽度稍宽一侧。模块各自切，页面不必共享一个全局 768。设备目录仍然可以当测试取样，但不能当切点来源。
边界
品牌要求「到平板就改成双列」是产品决策，不是内容阈值；一旦写进代码，它仍然是一条任意宽度，遇到分屏或放大文字会在错误的地方切。只在桌面设计稿上看过的行长，换生产字体、换语言、开大字号之后阈值会移，断点要跟着重测。图片画廊按图片最小边长切，和正文按行长切，失败模式不同，不能共用一个数。极窄宽度上「难读」可能无解（再切也放不下），那时该换信息结构而不是再加断点。打印、电子书、固定画布不走这段宽度轴。
怎么落地
- 对导航、正文、数据表、卡片栅格分别做宽度拖拽，记录各自开始难读（溢出、重叠、行长过长、控件挤碰）的像素，把断点设在该值稍宽处。
- 禁止把 375 / 768 / 1024 或设备营销名直接写成切点；设备只用来抽样验证，不用来命名规则。
- 允许不同模块使用不同切点；不要为了「整页整齐」强迫表格和标题同一像素切换。
- 验证：用生产字体和真实文案从宽拖到窄，在每个切点两侧截图。切点应落在「这一侧刚还好、那一侧开始坏」之间；若切点上内容仍舒适或已经坏很久，就不是内容阈值。