响应式布局的断点设计

做响应式页面，很多人第一反应是照着常见机型定几个宽度：三百七十五、七百六十八、一千二百。页面在测试机上看着没问题，换一台设备就出现文字挤成两行、按钮被裁掉、表格溢出。问题不在适配做得不够，而在断点的依据选错了。

断点应该由内容决定

机型尺寸每隔一两年就会变，内容的结构需求却相对稳定。判断断点的正确方式是：把浏览器窗口从宽拖到窄，观察页面在哪一个宽度开始变得难看——导航挤了、卡片太窄、行宽过长。那个宽度就是断点。按内容设的断点，比按设备设的更能扛住新机型。

三档起步足够用

多数企业站用三档就能覆盖：宽屏下多列布局，中档收起侧栏改为两列，窄屏下全部单列。档位越多，维护成本越高，也越容易出现某一档没人测过的情况。真要加档，优先加在内容确实撑不住的位置，而不是为了覆盖某款设备。

断点处的溢出要专门查

最容易被忽略的是断点临界状态：宽度刚好跨过阈值时，图片按百分比缩放后高度不足、按钮文字换行把布局撑破、表格横向溢出带动整页出现横向滚动条。建议在每个断点的上下各取十像素测试一遍，这类问题基本都会暴露。

图片与表格是重灾区

图片要按容器宽度自适应，同时保留宽高比例，避免加载时页面跳动。表格在窄屏上通常需要单独处理：改成卡片式堆叠，或者给表格容器加横向滚动并保留首列。直接把表格塞进小屏，几乎一定会溢出。

字体与行宽一起调

窄屏下字号不必等比缩小，正文降到十四到十六像素之间通常仍可读；行宽控制在每行三十到四十个汉字，太长会让眼睛在换行时找不到下一行的起点。行高随字号略作调整，密度才舒服。

测试不能只看模拟器

浏览器开发者工具的设备模拟很方便，但它不反映真实的触摸操作、字体渲染差异与安全区域。至少要拿两三台真机，重点看导航展开、表单输入、弹层关闭这几个交互。冉冉科技在响应式网站建设中，会把断点方案与真机测试记录一并写入交付文档，便于后续改版沿用。

小结

断点不是设备的清单，而是内容的临界线。按内容设线，页面才能在各种屏幕上站得住。

关于冉冉科技

江苏冉冉信息科技有限公司（品牌“冉冉科技”）成立于2017年，位于江苏省常州市新北区，是一家从事互联网信息服务、电子商务应用与企业应用系统开发的技术服务企业。公司业务涵盖网站建设、网页设计、SEO优化、竞价包年、域名注册、虚拟主机、企业邮箱、整合营销及企业形象策划等，以“只做有效果的网络营销”为服务主张，累计完成三千余起网站建设与服务。