响应式布局的断点策略与移动端阅读体验 | 拾音
断点应该由内容决定
常见的做法是照搬 768/1024/1280 三个断点，但更合理的方式是：把浏览器拉窄，直到布局开始难看，那里就是断点。
本站最终只保留两个断点：
640px：单列布局，导航折叠为抽屉；1024px：正文与侧栏两栏，目录固定在右侧。
流式排版
正文宽度使用 min(68ch, 100%)，字号使用 clamp()：
.article-body {
width: min(68ch, 100%);
font-size: clamp(16px, 1.05vw + 12px, 19px);
line-height: 1.85;
}
ch 单位以字符宽度为基准，能保证每行 60–70 个字符的最佳阅读长度；clamp() 让字号随视口平滑变化，避免断点处的突变。
移动端的三个细节
- 点击区域：导航与播放控制的最小点击区域为 44×44 px；
- 目录：移动端不显示固定目录，改为文首可折叠的"本文目录"；
- 播放器：底部播放条吸底，避免遮挡正文，并适配 iOS 的安全区域：
.player-bar {
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
图片与媒体
所有封面图使用 aspect-ratio 占位，避免加载时的布局抖动：
.cover { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
配合 loading="lazy" 与 decoding="async"，移动端的首屏加载时间下降了约 35%。
测试方法
除了 Chrome DevTools 的设备模拟，我还在真机上验证了 iOS Safari 与 Android Chrome。模拟器无法完全复现字体渲染、滚动惯性、安全区域等问题，真机测试不可省略。
小结
响应式的核心不是断点数量，而是内容在不同宽度下的可读性。以字符宽度约束行宽、以 clamp() 平滑字号、以真机验证细节，比堆叠媒体查询更有效。