今天折腾响应式菜单搞到夜里三点，血压都上来了。事情得从上周说起，有个粉丝私信问我电脑上看好好的导航栏，到他手机上咋就乱成一锅粥。我拍胸脯说小菜一碟，结果自己动手才发现全是坑。
手撕Float布局翻车现场
刚开始还按老套路来，拿float左一个右一个摆菜单项。电脑显示器上确实挺整齐，结果掏出手机一看——好家伙！菜单项全挤成俄罗斯方块了，点都点不中。改了半天padding和margin，这边调好那边又炸，饿得前心贴后背时候突然想起来：「这都2024年了谁还用float搞响应式！」
- 硬编码宽度完蛋：设了300px的菜单栏，到iPhone上直接冲出屏幕
- %百分比也不好使：窄屏时两行文字叠成俄文密码
- 媒体查询写得像裹脚布：@media (max-width: 768px) and (min-width: 480px)......
CSS Grid救命稻草
气得想砸键盘时候突然想起前阵子看过Grid布局。赶紧翻出压箱底的笔记，把导航栏容器改成display: grid;。好家伙！就加两行代码瞬间起死回生：
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 这玩意神了，自动把菜单项按屏幕宽度排队。窄屏时缩成小方块，宽屏时舒舒服服铺开。就像乐高积木自己会变形似的，比之前float时代拿计算器抠像素强一百倍。
汉堡菜单的血泪史
手机竖屏时空间实在不够，汉堡菜单必须上了。最初拿纯CSS写点击动画，>span:nth-child(2)这种选择器看得眼冒金星。明明在Chrome调试得好好的，传到真机测试时三根薯条死活不变成叉。
气得我直接把同事去年写的汉堡菜单代码拖过来改。结果这货的transform-origin设了87%这种玄学数值，手机竖屏时叉号对不齐，横屏时又跑偏。心一横全删了，改成最简单粗暴的：
- 默认汉堡图标
- 点击后用js给body加.menu-open类
- 通过css控制叉号动画
测试时发现华为手机点两下才响应，原来是touch事件没做防抖。临时塞了段setTimeout才救回来，搞完天都亮了。
终极缝合怪方案
现在电脑上是大横条导航，手机端自动变汉堡菜单的核心在于：
- 外层容器用grid布局自适应
- 800px分界线下隐藏菜单项
- 触发按钮固定右上角
- 展开菜单用position:absolute盖全屏
- 滚动时加个-webkit-overflow-scrolling: touch防卡顿
同事早上看见我代码直骂丑，但实测从iPhone6到4K屏都没崩。临走撂了句狠话：「你这缝缝补补的玩意，跳槽可千万别放作品集！」