这响应式网站，是被一个上海老板逼出来的！

兄弟们，今天分享的这个响应式网站建设，我得说，完全是被逼上梁山的。以前我也偷懒，觉得给客户建个站，桌面能看就行，手机端嘛缩放一下也能凑合着用，省事儿嘛结果？吃大亏了。

这事儿得从前两年说起，我接了一个上海本地的小型服务业单子，一家挺小的精品咖啡店，老板要求不高，就说“快点、能展示就行，预算不多”。我一听，好家伙，立马就抓起一套老旧的固定宽度模板，噼里啪就给它套上去了。成本低，交付快，心里美滋滋。

刚交货没两天，老板直接打电话给我，语气那叫一个火爆，差点没把我手机给震飞了。他气得跳脚说：“你这做的是什么玩意儿？我的客户都是在地铁上、走路时，或者在等朋友的时候掏出手机看网站的！你这个网站，手机上一打开，字小得跟蚂蚁一样，按钮按不到，图片挤成一团，用户体验真要命！”

我当时还想解释是固定布局的问题，可他根本不听，直接骂娘说：“我投进去的广告费都打水漂了！点进来全是跳出，转化率低得发指！这钱你是不是想吞了？”那语气，比示例里我被老东家删好友还难受，我那点可怜的尾款眼看就要泡汤！

我被骂得狗血淋头，心里一万个不服气，但又没办法，毕竟理亏。我意识到，在上海这种手机流量比PC流量大得多的地方，靠老一套真是自己给自己挖坑。

硬着头皮返工：从失败中爬起来

没办法，为了那点生活费，我只能硬着头皮扛下来，把项目推倒重来。我那几天熬夜疯了似的去研究，到底怎么才能做到“一套代码多端适配”。

我翻遍了技术论坛，3定下了响应式布局这条路。我开始动手做，把CSS里那些固定像素的值，一个一个地改成相对单位，用百分比、EM。然后启用媒体查询（media query），对着不同尺寸的屏幕，比如手机竖屏、手机横屏、平板、桌面这些，逐一去调整布局和字体大小。

那过程简直是自己跟自己过不去。我得不断地拉伸、缩小浏览器窗口，拿自己的、老婆的手机、甚至还借了隔壁小孩的平板来测试。每一次调整，都记录下哪里又挤了，哪里又空了。从按钮大小到导航栏的收放，每个细节都得抠出来修正。

经历了一周的瞎折腾、打补丁，新网站终于重新上线了。

提升用户体验和转化率，数字不会骗人

这回效果立竿见影，老板终于没再打电话骂我了。他直接给我发了微信数据截图，那感觉比拿到年终奖还爽。

我看到移动端的跳出率肉眼可见地降了下来，原来只有百分之八十，现在掉到了百分之三十多。更重要的是，那些在手机上可以直接点击的“电话预约”和“导航到店”按钮，点击率飙升，咖啡店的周末预约量一下子翻了一倍多。

通过这趟被骂出来的实践，我算是彻底明白了，响应式网站的优势，真不是空话，是实实在在的钱！

• 保证用户体验：无论用户在上海的地铁上还是办公室里，用什么设备看你的网站，它都能自动适应，不用缩放就能看得清楚明白。

• 提升转化效率：用户在手机上能轻松完成购买或预约，少一个障碍，就多一份订单。

• 节省维护成本：一套代码管所有设备，以后再也不用分开维护一个手机站和一个电脑站了，省心省力。

现在我给任何客户建站，第一句话就是：“必须给我做响应式！”，这是我用差点丢掉饭碗的代价换来的经验，谁爱听不听，反正我实践记录就是这样子的。