手机上看着精致，平板一打开，布局突然摊成一片，间距大得离谱——这是响应式网站最常见的中间地带翻车。很多开发只做两个版本：电脑版和手机版，平板被当成缩小版电脑糊弄过去。网页设计制作的响应式工作，核心功夫恰恰在这几个过渡尺寸上。
断点是什么
断点是布局切换的临界宽度。常见设定：一千二百像素以上走完整电脑版，九百多到一千一算小桌面，七百六十八到九百九十一是平板，再往下进手机版。断点不是圣经，要根据内容定——三栏产品列表在哪个宽度挤不下、该收成两栏，那个宽度才是你的断点。设计阶段就该出三套稿：电脑版、平板版、手机版，只出两套的项目，平板那段全靠前端自由发挥，翻车概率极高。
平板是最容易糊弄的尺寸
平板的尴尬在于：内容区比手机宽得多，套用手机版单栏布局，文字一行拖得太长；套用电脑版，导航和间距又挤。平板版通常的处理是内容区适当收窄，卡片从电脑版的四栏减到三栏或两栏，导航保留完整版而不是折叠。别忘了横竖屏切换，竖屏九百像素宽横屏就一千出头，两套断点附近都要测。另外触屏和鼠标的操作逻辑不同，平板上没有悬停，靠悬停出现的下拉菜单得改成点按展开。
重排不是缩小
网页设计制作响应式的常见误区是整体等比缩放，电脑版截图缩小塞进手机，字小得要用放大镜。正确的重排是按优先级调整内容：手机版把电脑版里首屏的左图右文改成上图下文，把并排的四张卡片摞成一张全宽卡片，把次要侧栏挪到正文后面。内容顺序、按钮大小、点击热区都要重新设计，手机上的按钮热区至少四十四像素见方，拇指才按得准。
断点测试的土办法
断点测试有个土办法很管用：把浏览器窗口从最宽慢慢拖到最窄，盯着一处布局看它怎么变。变形的瞬间就是断点生效的位置，检查这个瞬间内容有没有闪跳、图片有没有突然模糊、按钮有没有被截断。全程拖一遍，几分钟把所有断点过完。发现过渡生硬的位置，要么调断点数值，要么给中间宽度补一套样式。土办法虽然不精确，抓大问题绰绰有余。
两句实在建议：验收时准备真机，至少一部手机加一台平板，页面从头滚到尾，模拟器测不出触屏的坑；外包合同里写明交付三种尺寸的设计稿，比格网络这类团队默认三端出稿，中间尺寸的体验在上线前就设计好了，而不是留给运气。
