一台iPad横过来打开公司官网，中间整个区块错位，按钮悬在半空——这不是段子，是上个月一个客户真实碰到的场景。他花了两万多做的网站，电脑和手机都没问题，唯独平板上没法看。问题出在哪？断点。客户当场就问：这么贵的网站，怎么连个iPad都伺候不好？
断点是什么，为什么这么要紧
说直白点，断点就是布局在哪个屏幕宽度发生切换的关口。比如定了768像素这个断点，宽度比它大的屏幕显示三栏，比它小的自动收成两栏或一栏。设得合理，各种设备上页面都长得自然；设得不合理，就总有一些「不上不下」的设备掉进夹缝，页面元素挤成一团或者留出大片空白。那位客户的网站只写了电脑和手机两档断点，平板卡在中间，直接翻车。
断点别拍脑袋定，按内容和设备定
网上流传一组通用断点值，很多人直接照搬，结果做出来的页面总有几个尺寸别扭。我们的习惯是先把客户的目标设备列出来，比如机械行业客户常用平板在车间里查参数，那平板档位就必须做细；再拿设计稿在每个档位下过一遍，哪里换行难看、哪里图片太小，反过来微调断点。常用方案是三到五档，覆盖手机竖屏、手机横屏、平板、笔记本、大屏显示器。折叠屏这几年渐多，预算充足的可以加一档。设备清单列得越具体，断点就越好定，后期返工也越少。
- 断点数量不是越多越好，每多一档，测试工作量翻着涨；
- 两个断点之间的过渡区要单独检查，问题多出在这里；
- 横竖屏旋转必须测，很多bug只在旋转后出现。
验收时怎么抓断点问题
给你个笨办法：用浏览器慢慢拖动窗口宽度，从最大拖到最小，盯着页面元素的变化。哪个宽度上突然出现横向滚动条、图片拉伸、文字重叠，那里就是断点没处理好。比开发嘴上说「都适配了」管用得多。这个笨办法五分钟就能学会，验收新站时一定用得上。
正在选建站公司的，可以把「断点方案写进合同附件」这一条记住，写得清清楚楚的团队，通常靠得住。比格网络做响应式网站设计项目时，交付文档里会附断点和测试机型清单，你要是拿不准别家的方案，照这个标准对一遍就心中有数了。
