上周有位做五金配件的老板拿着手机给我们看他家官网：字小得要用两根手指放大，导航挤成一排，询价按钮根本点不中。他问能不能“再做一个手机版”。我们看完的建议是别再加一个站，直接改成响应式网站，一套页面同时照顾电脑和手机。
这个词很多人听过，但它和PC站、手机站差在哪，不少人说不清。
响应式网站到底是什么
一句话：同一个网址、同一套内容，页面根据屏幕宽度自动换排版。
电脑上看，产品列表可能一行排四个，左边还有侧栏；换到平板，变成一行两个，侧栏收到下面；到了手机上，一行一个，导航折叠成右上角的“三条杠”菜单。文字、图片、产品数据都是同一份，变的只是摆放方式。
做到这一点靠的是前端样式里的“断点”。设计师和前端会先定几个屏幕宽度的分界线，比如手机、平板、笔记本、大显示器各一档，到了某个宽度，布局就切换一次。断点不是越多越好，一般三四档就够，关键是每一档都要真机看过，而不是只在电脑浏览器里拖窗口。
和PC站、手机站有什么区别
把三种做法放在一起比，差别就清楚了：
| 对比项 | PC站 | PC站 + 独立手机站 | 响应式网站 |
|---|---|---|---|
| 网址 | 一个 | 两个（常见 m. 开头） | 一个 |
| 内容 | 一份 | 两份，需要同步 | 一份 |
| 手机浏览 | 要放大缩小 | 体验好 | 体验好 |
| 后台更新 | 改一次 | 常要改两次 | 改一次 |
| 设计开发 | 简单 | 两套页面 | 一套页面，适配要细 |
只有PC站的老网站，在手机上就是缩小版。现在很多询盘是在手机上发起的，这等于把一部分客户挡在门外。
PC站加独立手机站，是前些年很常见的做法。手机站可以单独设计，体验往往不错，问题出在后面：两套模板、两份内容，产品上新、电话改了，得记得两边都改。我们接手过不少这种老站，手机站里还挂着几年前的旧产品，PC站早就下架了。
响应式网站的维护成本为什么低
后台只有一套内容，这是最实际的好处。
运营发一篇新闻、换一张产品图，电脑和手机同时生效。后续加功能、修问题，也只动一套代码。
当然，前期的设计和开发并不会更省事。每个页面都要考虑几档宽度下怎么排，表格、长参数、多图对比这类内容，在手机上要专门想办法，比如改成可左右滑动，或者折叠成卡片。这部分功夫省掉了，就会出现“电脑上很好看、手机上乱七八糟”的假响应式。
一个网址对SEO有什么好处
搜索引擎更喜欢一个页面只有一个网址。
独立手机站意味着同一个产品有两个地址，要靠跳转规则、对应标注告诉搜索引擎它们是一回事。配置错了，可能出现重复收录、权重分散，或者手机用户点进来被跳到首页。这类错误我们排查收录时碰到过不止一次。
响应式网站没有这层麻烦。外部链接、分享出去的链接都指向同一个地址，积累的权重也集中在一处。搜索引擎现在普遍按手机版页面来评估网站，页面在手机上能正常显示、字号合适、按钮好点，本身就是加分项。
要提醒一句：响应式只是基础，不等于做好了SEO。标题、内容、打开速度这些照样要做，详细的可以看我们的网站建设服务说明。
什么情况下仍需单独做手机站
大部分企业官网、产品展示站，响应式完全够用。下面几种情况，可以考虑单独做手机端：
- 手机端的功能和电脑端差别很大。比如电脑上是复杂的选型工具，手机上只需要一键拨号和留言，硬塞进一套页面反而两边都不好用；
- 页面特别重，图片和交互多，手机上想要一个精简得多的版本；
- 主要流量来自微信内部，用户习惯在微信里完成下单、预约，这时候做小程序往往比手机站更合适，可以看看小程序开发。
判断方法很简单：把你希望手机用户完成的动作列出来，如果和电脑用户基本一致，就用响应式；差别大到要重新设计流程，再考虑分开做。
改造老网站时容易踩的坑
很多客户是从老站改过来的，常见问题集中在几处。
老内容里有大量写死宽度的表格和图片，套上新模板后照样撑破屏幕，需要逐页清理。还有人只测了自己的手机，换个小屏或者横屏就错位。另外，弹窗、浮动客服在手机上很容易挡住正文，这一点上线前要专门看。
改造后找几台不同尺寸的手机，把首页、产品页、联系页点一遍，表单真提交一次，比检测工具靠谱。
结论
响应式网站用一个网址、一套内容适配所有屏幕，日常维护只改一处，SEO上也省去了双站的跳转和重复问题，适合绝大多数企业官网。手机端流程和电脑端差别很大、或者主要在微信里成交时，再考虑独立手机站或小程序。蔚岚科技做企业官网默认按响应式设计，老站改造也可以先帮你评估，电话 18720919319，或者在联系我们留言。
常见问题
响应式网站和自适应网站是一回事吗？
日常说法里经常混用。严格讲，响应式是布局随宽度连续调整，自适应更偏向为几种固定宽度各出一套版式。对企业官网来说，关心效果就行，不必纠结名词。
我的网站是不是响应式，自己怎么判断？
在电脑上打开网站，慢慢把浏览器窗口拉窄，看布局会不会跟着变成单栏、导航会不会折叠。再用手机打开同一个网址，不用放大就能看清文字，基本就是了。
做响应式网站会不会更贵？
设计和前端要多考虑几档屏幕，前期工作量通常比单做PC页面多一些，但比做两套站省，后期维护也少。具体费用和页面数量、功能有关，可以按需求要报价。
老网站能直接改成响应式吗？
多数可以，通常是换一套响应式模板，再把老内容整理一遍。如果老站代码很旧、内容格式混乱，重做往往比改更省时间。
用了响应式，还需要做小程序吗？
两者不冲突。响应式网站解决的是搜索和浏览器访问，小程序更适合微信里的预约、下单、会员这类服务。业务有需要可以都做，内容和接口尽量共用。