为什么值得单独写
这篇文章面向真实业务项目。很多前端问题在 demo 里看不出来，到了多人协作、历史代码和线上数据里才会暴露。
移动端不是把宽度换成 rem 就结束。动态地址栏、安全区、键盘弹起、横竖屏切换都会影响真实布局。
给出轻量实现思路，方便在类似场景里复用。 这类经验有一个共同点：不要只追求“能跑”，还要能解释为什么这么做、边界在哪里、后续谁来维护。
判断标准
一个前端方案是否耐用，要看三件事：需求变化时是否容易改，异常数据出现时是否容易定位，团队新人接手时是否能读懂边界。只在本地跑通不是完成，能在真实数据、真实设备和真实协作里稳定运行，才算真正落地。
项目里的例子
比如一个列表页从 20 条数据增长到 3000 条数据，原本没有问题的筛选、排序、渲染和空状态都会被放大。此时应该先确认瓶颈在哪里，再决定是缓存计算、分页、虚拟列表，还是调整接口查询方式。
落地步骤
- 先确认问题属于数据、状态、视图、交互还是构建链路。
- 找到项目里已有的稳定写法，避免引入第二套风格。
- 用最小改动验证假设，再扩大到完整方案。
- 补上空状态、失败状态、慢网络和权限边界。
参考片段
.footer-action {
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}容易忽略的细节
- 只在理想数据下调通，没有看异常路径。
- 为了复用过早抽象，反而让业务语义变模糊。
- 忽略低端设备、慢网络和长文本。
验收方式
- 能用一句话说清楚它解决的具体问题。
- 有可执行的验证命令、页面路径或检查清单。
- 对失败、空数据和边界输入有明确处理。
- 后续维护者不用读完整上下文也能接着改。
技术方案的价值不在于看起来高级，而在于下一次遇到相似问题时，团队能更快、更稳地复用它。