同一个官网，设计师在电脑上看大气舒展，切到手机上标题被截断、留白忽大忽小，客户当场就问：你们是不是没做移动端适配？其实做了，问题出在断点设置上。断点就是页面布局切换的开关，设在哪个宽度、切完之后元素怎么重排，直接决定页面在每一档尺寸上的观感。同样一套代码，断点划得聪明，页面在每个宽度上都体面；划得糙，就总有几档看着别扭。
断点不是越多越好
常见的划法是三档：手机一档，平板一档，桌面一档，再讲究点的会分出大屏和横竖屏。有些建站团队为了省事只留一个断点，结果 6.7 英寸的大屏手机和 4.7 英寸的小屏手机看到的是同一套布局，小屏上挤、大屏上松，客户拿两台手机一对比，差距立刻现形。反过来，断点设得太密也不行，切换过于频繁，内容和间距经常跳变，看着反而乱。断点数量没有标准答案，拿后台的访客设备数据来划，比拍脑袋靠谱。
弹性布局比死写宽度靠谱
与其盯着每一个宽度调像素，不如让元素自己会伸缩。目前主流的做法是弹性布局加相对单位，容器宽度按百分比或视口单位来算，文字用相对单位定义，屏幕变宽变窄时整体跟着走，断点只负责处理重排，比如四列产品变两列、侧边栏挪到正文下面。这样做的网站，面对市面上几百种屏幕尺寸都不容易出大问题。反过来说，如果服务商告诉你他们是逐个宽度调像素的，要么工期报得不够，要么后面加内容就没法看了。
- 容器宽度别写死 1200 像素，改成上限加百分比，小屏自动收窄。
- 切换断点时检查图片有没有跟着换尺寸，别让小屏幕白白加载大图。
- 重点测试 375、414、768、1440 这几个常见宽度，能覆盖大多数访客。
- 换手机横竖屏试试，横屏是很多项目漏测的状态。
给两条实在建议
说到底，断点是手段，观感才是目的，移动端适配的大多数观感问题都出在断点和布局的配合上。验收时准备一台小屏手机和一台大屏手机，同一页面对比着看，间距和字号有没有明显失衡一眼就能发现。两台设备各翻三个页面，十分钟就能摸清底细。找服务商谈方案时，可以问他们断点怎么规划、用什么布局方式，答得含糊的要多留个心眼，像比格网络这类团队会按访客设备占比来定断点，这种回答相对靠谱。答不上来的，方案里多半没做这层规划。
