昨天改自己博客的时候突然发现，用手机打开排版全乱了！图片挤成一条缝，侧边栏把正文压得只剩指甲盖那么宽。气得我当场就想摔鼠标——这破站还怎么给人看！

直接开整响应式布局

翻箱倒柜找出十年前买的《CSS入门到放弃》，照着书吭哧吭哧改代码。先给所有容器加上这行：

意思就是别管屏幕多宽，咱这玩意儿最大就撑到1200像素。改完刷新页面一看，电脑上倒是整齐了，可手机里正文还是挤在角落里发抖。

移动端适配差点要我老命

熬夜搜教程发现要加这玩意儿：

专门对付手机屏幕的！在下面狂写一堆适配规则：

• 导航菜单从横排变竖排
• 侧边栏直接折叠成汉堡图标
• 正文字号从16px猛增到20px

手指都快敲出火星子了，结果安卓机打开——菜单图标死活不显示！原来华为浏览器把字体图标当病毒拦了，换成SVG图片才解决。

图片适配的坑栽得最狠

本来以为写个img{max-width:100%}就能搞定，结果平板竖屏浏览时，800像素宽的配图直接糊成马赛克。连夜把三十多篇文章里的图片全改成：

传图传到凌晨三点，躺床上眼前还在飘代码。

终极测试翻车现场

今天早高峰挤地铁时掏出三年陈的iphone8测试，加载完直接白屏！打开开发者工具一看，某张老图片没压缩，4K大图把手机内存撑爆了。灰溜溜蹲在车厢连接处，用在线工具把全站图片压到200kb以内。

搞完这堆破事突然想起来，十年前入职第一家公司时，老板拍着我肩膀说："小王，把官网改成手机能看的就行"。当时熬通宵用两套CSS+网页跳转的土法子糊弄过去，结果被客户投诉"用手机刷新居然跳回电脑版"，因为这个月奖金全扣光。

现在想想，当年要是会响应式布局，也不至于被那个地中海CTO指着鼻子骂"连个自适应都搞不定"。上周听前同事说，那破公司官网至今还是两套代码切换，手机版URL至今挂着/m/路径！