一台电脑一台手机，访问同一个网址，看到的版式完全不同，这事现在没人觉得稀奇。但响应式网站建设到底是怎么做到的，不少做了十年官网的企业主未必说得清。有人以为是服务器认出手机后切到另一套页面，也有人干脆认为就是页面自动缩小了。都对了一半，也都不对。
真正在干活的是浏览器。同一份 HTML，配合弹性栅格、相对单位和媒体查询三样东西，页面会按窗口宽度重新计算每块内容摆多大、占几列。宽度跨过某个数值，布局就换一种排法，这个数值就是常说的断点。整个过程不跳转、不刷新，网址从头到尾只有一个。
断点不是按手机型号定的
不少甲方提需求时爱列一串机型，iPhone 哪一代、某款折叠屏多少像素，要求逐个适配。其实断点的依据是内容，不是设备。哪一档宽度下产品卡片的文字开始挤、参数表放不下了，断点就划在哪。市面上常见的做法是划三档上下：宽屏、平板、手机，再多就属于特殊项目。栏目少的官网，两档也够用。
这里有个容易想偏的地方：断点越细不代表体验越好。断点划得密，设计师要维护的版式状态成倍增加，测试量也跟着翻，最后往往顾此失彼。把主要精力放在手机档和电脑档这两头，中间档保底不出错，是更务实的路子。
图片才是加载的大头
版式弹性了，图片不跟着变，手机端照样又慢又糊。现在通行的做法是同一张图准备几个尺寸，浏览器按设备挑着下，再配上 WebP 这类新格式，图片体积能压掉一半往上。首屏大图要单独处理，懒加载也得有节制，首屏内的图懒加载反而拖慢显示。
海外客户访问的话还有一层：图片服务器最好在海外，或者挂 CDN，不然欧美客户打开页面，光等图就要好几秒。服务器位置对成本的影响，之前拆过一篇报价文，可以对照着看（外贸网站建设报价差十倍，钱都花在哪了）。
导航和参数表，手机端最容易翻车
手机端适配里，桌面端通栏大菜单改成抽屉式或底部固定栏，属于基本操作。真正容易漏的是 B2B 官网特有几样东西：多列参数对比表、可下载的规格书、询盘表单。参数表在窄屏上要么横向滚动要么重排，得明确选一种；表单字段一多，输入框被键盘顶住的体验，不真机试一遍根本不知道。
验收别只看截图。把浏览器窗口从宽拖到窄，看布局在哪个宽度下开始乱，比在真机上一台台翻效率高。当然最终还是要上真设备过一遍，重点盯表单能不能顺利填完、电话和 WhatsApp 入口是否一点就呼起。手机端完成度对一个官网的信任度影响很大，这点在之前聊询盘的文章里展开过（B2B企业官网为什么带不来询盘？五个常被忽略的环节）。
一个几秒钟的自我检查办法
不用懂代码也能粗判一个站是不是真响应式：电脑上打开页面，拖着窗口边缘慢慢变窄。版式跟着变、图片换尺寸、导航收起来的，是响应式；出现横向滚动条、内容被裁掉的，多半只是固定宽度页面。拿不准效果好坏的话，也可以去案例页看看不同行业的实际成品（网站建设客户案例），比听销售讲术语实在。
相关问答
响应式网站和自适应网站是一回事吗？
不是一回事，但界线确实模糊。自适应一般指服务端或前端准备好几套固定版式，按设备切换；响应式是同一套版式随窗口宽度连续变化。现在很多建站方案两者混用，问清楚切换逻辑比纠结名词更有用。
做了响应式，对Google排名有影响吗？
有正面影响。Google 多年前就改成移动优先索引，排名主要看手机端的抓取和体验。响应式只有一个网址，内外链权重不分散，加上手机体验好，对排名是加分项。
已有电脑版网站，是加个手机版还是重做响应式？
看原站底子。代码规整、内容结构清晰的站，可以做响应式改造，费用比重做低不少；早年表格布局时代的老站，改造成本接近重做，那就不如趁这次把内容和架构一起理顺。