昨天刚给朝阳一家文创公司做完官网改版，甲方突然要加移动端适配。我这半路出家的野路子直接懵了——当初自学前端就背了几个div标签，响应式设计压根没整明白！赶紧翻开笔记本查去年报的网课笔记，好家伙，当初居然用红笔在页面右上角写了四个大字：此处有坑。

一、被招聘需求锤醒

去年面试海淀互联网公司，hr甩给我一沓岗位要求，十条里有八条写着"精通响应式布局"。回来就扒拉Boss直聘搜"北京网页设计"，结果看到满屏的：

• 移动端兼容性能吃透
• Flex布局手到擒来
• 媒体查询写麻了最好

当时电脑里存着的还是2019年给昌平家具城做的老古董网站——电脑上看挺大气，手机一点开产品图直接撑爆屏幕，老板还打电话骂："客户说咱家沙发在手机上显示跟变形金刚似的！"

二、拿自己开刀练手

翻出压箱底的破戴尔笔记本，开机等了十分钟。先拿个人博客开刀：

1. 把原先固定960px的网页硬拆成三栏
2. 给每列加上width: 33.333%
3. 随手加个@media (max-width:768px)

手机预览当场翻车——导航栏挤成俄罗斯方块，侧边栏把正文踹到屏幕底下。气得我直接拔电源，下楼买了三罐红牛接着干。

三、胡同网实战

在家折腾三天连footer都沉不下去，揣着U盘跑到胡同深处黑网。两块钱一小时的油腻键盘上，我发现了个邪门技巧：用老式浏览器测兼容性。

• Chrome调到百分百显示正常？不行！开IE8看
• Safari字体渲染精致？不行！找台iPhone4测试
• 华为折叠屏展开效果惊艳？不行！借楼下小卖部老板的千元机戳戳看

原来移动端适配根本不用追新，先让最破的设备能看清字才是王道。

四、印刷店老板成贵人

熬通宵改完的页面传到手机，文字还是忽大忽小。打印店王老板看我蹲门口抓头发，甩过来他淘汰的三星Note："用这个测，我家闺女说这手机看啥都像马赛克"。

果然！在720p的老安卓机上发现致命bug：图片比例用百分比+高度auto居然显示半截。赶紧回店里抄起王老板的记账本，在背面写下公式：(容器高度÷视口高度)×100vh，粘在显示器边框上天天瞅。

五、血泪总结三板斧

现在给客户写移动端就跟切菜似的：

1. 先套viewport标签锁死缩放比例
2. 所有尺寸单位换成rem，根字体设成62.5%偷懒
3. 媒体查询按华为/小米/iPhone的热门机型宽高比反推断点

上周交活儿时甲方总监举着手机划拉半天，蹦了句："你们公司做适配咋比我们产品经理的手机型号还全？"

我低头看了眼磨掉漆的千元测试机没吭声——这玩意儿放兜里硌得大腿疼，可它帮我多要了30%的尾款。