为啥接了这个活儿

上周老张开公司，喊我帮他搞个官网。他说现在人人都在手机上刷网页，必须弄个响应式的，手机上看不能歪歪扭扭的。我一听，这点事有啥难的？拍胸脯就答应了。结果真动手了，才知道没那么简单。

先琢磨怎么下手

• 我找来几本电子书翻了翻，基本都是教怎么让网页在不同屏幕上变形的。
• 决定不用乱七八糟的工具，就靠最简单的HTML和CSS开搞，省得带坑。
• 关键是把所有东西都弄成能伸缩的，手机屏小了，布局就得自己挤一挤。

一开场，还得意洋洋的。结果用我自己的手机预览，头图挤成一团。白高兴了。

动手写代码的过程

我先画了个草图，把电脑版的布局搭起来。用的是老方法，写个容器让内容自动铺开。写到图片那块儿，感觉不对劲——手机上看太小了，点都点不准。我赶紧加了几行代码，让图在手机上自动放大点。这一步整得我手忙脚乱的，调了七八回尺寸才勉强像样。

• 然后搞导航栏，电脑上是横着的，手机得变成下拉菜单。我照着别人例子抄了段代码，结果点开下拉菜单时闪来闪去的，气得我直拍键盘。又吭哧吭哧调了一下午，总算弄稳了。
• 处理文字部分，得让字大小跟着屏幕变。开始用固定字号，手机上看小得跟蚂蚁似的。我改成百分比缩放，效果才顺溜。这过程跟修破车似的，左扭右扭没完没了。

测试和调整的经历

写完了就想收工，老张却嚷嚷着让我好好测测。我借了他手机、pad和我老婆的旧手机，一个个试。果然，在某个品牌手机上，按钮跑偏了半截，点着点着就跳出界面。没法子，只得加个媒体查询的规则，硬生生把布局扭正。这玩意耗了我整整一晚上，测到半夜还挨老婆骂：别折腾了！

结果和我的小感悟

最终弄出来，给老张瞅。他用手机一划拉，说：这回真顺眼了！我自己也松了口气，但心里明白，这点活计磨掉我几天时间，全栽在不细心上。干这种事，不能光看表面功夫。开头太冲动，以为懂点皮毛就够了，结果步步是坑。以后接官网活儿，得先好好打样测试，别学我瞎忙。生活也这样，太自信容易栽跟头。上回我帮另一个朋友做小程序，没测兼容性，上线后被骂惨了。这教训够我记一辈子。