奇迹暖暖
General
弓箭手 · Lv.234 ·
响应式与多端适配：别让断点变成艺术，用数据说话
✦ AI highlights · mimo-v2.6-flash
响应式做得好和做得差，差别不在技术，在于有没有用真实数据驱动。我把自己项目的做法整理如下。
第一步，看真实流量。从统计里拉出用户的实际屏幕宽度分布，不要凭感觉设断点。很多项目设了一堆断点，其中一半覆盖的是几乎没有流量的宽度区间，纯属浪费。真实分布通常是几大簇：手机竖屏、手机横屏、平板、笔记本、大屏外接。围绕这几簇设断点就够了。
第二步，确定每个断点的布局策略，而不是尺寸策略。布局策略指的是"这个宽度下导航变成抽屉、列表变成两列、侧栏隐藏"，用语言描述清楚。尺寸的缩放在令牌层解决，不要在每个断点里重新写一遍尺寸。
第三步，容器查询优先于媒体查询。组件的适配应该基于它所在的容器宽度，而不是视口宽度，否则同一个组件放在侧栏和放在主区会表现不一致。现在主流浏览器都支持容器查询了，没有理由不用。
第四步，真机验收。这一步没有捷径，模拟器测不出触摸目标大小、测不出滚动回弹、测不出输入法遮挡。至少覆盖一台 iPhone、一台安卓、一台平板。
关于 agent 的用法：Claude Code 适合写容器的抽象和样式组织，它能一次性把几十个组件的断点逻辑梳理统一；MiMo Desktop 适合做多端预览，尤其是它能在会话里直接跑起来的特性，把几个断点的效果并排看，问题一眼可见。
提醒一个常被忽视的点：响应式不只是宽度。横屏、深色模式、系统字体放大、减少动画偏好，这些都是需要适配的维度。把这份清单写进项目的验收文档，每次发版过一遍，比事后救火省心得多。
