昨天下午接了个私活，甲方甩来个企业官网需求。本来觉着前端嘛不就是切图写样式么，结果啪啪打脸，坑踩得我头皮发麻。今天就掰扯掰扯那些让我熬夜改到凌晨三点的破事儿。

第一坑：浏览器测试偷懒

客户发来设计稿，我抄起Chrome咣咣咣一顿写。导航栏悬浮效果贼炫酷，鼠标移上去还有渐变色。交活儿那天客户炸毛了——他们财务用的XP系统配360浏览器，打开直接导航栏叠成俄罗斯方块。我愣是抱着十年前的旧笔记本测了半天，才发现盒模型在IE内核里跟嗑药似的乱窜。

• 别学我：现在接活儿先问对方用啥浏览器，旧电脑也得备两台
• 血泪史：改兼容性那天吃了六桶泡面

第二坑：手机屏当空气

桌面版做得那叫个行云流水，心想响应式不就是加个媒体查询嘛结果用真机一看，文字小得得像蚂蚁开会，按钮挤得能玩连连看。客户拿着他那个iPhone13直拍桌：“这购买按钮我得用牙签戳！”

突然开窍：现在写代码手机就架在键盘旁边，每写三行就抓起来瞅两眼。

第三坑：动画效果玩上头

页面里塞了八个会动的粒子特效，鼠标滚轮还得触发3D翻转。做完得意洋洋发给客户，三分钟后收到语音咆哮：“我们卖化肥的官网加载了半分钟！供应商还以为网站倒闭了！”用流量一测，首页加载整整18秒。

• 现学现卖：GIF全换成webp，JS动画能砍则砍
• 核心觉悟：老板们用的千元机比咱们的测试机卡十倍

第四坑：字体放飞自我

图省事儿用了思源宋体，本地调试美滋滋。上线后客户截图过来全是方框——他们电脑压根没装这字体。更绝的是，微软雅黑居然要收费！连夜把字体文件塞进服务器，CSS里密密麻麻写fallback。

现在乖了：字体全家桶直接扔CDN，font-family至少写五层备用方案。

的神转折

改完这破项目已经凌晨四点，客户突然发消息说很满意，反手又介绍了三个新甲方。结果这三个新客户用的分别是：政府单位的IE8、外贸公司的旧版Safari、老年保健品店的塞班系统...得，刚填完的坑又得重跳一遍。

所以兄弟们呐，下次写页面：古董浏览器测三遍，真机调试不能省，动效适可而止，字体别玩骚操作。谁再跟我似的头铁，就等着体验凌晨三点改CSS的修仙快感！