前两天接了个手机网页的活儿，结果一上手就抓瞎了。甲方非要我在他们领导出差前搞定，我盯着那破笔记本电脑直挠头——以前做电脑端网页还能凑合，现在要适配各种手机屏幕，字体忽大忽小，按钮点都点不准，真tm头皮发麻。

1. 翻出压箱底的浏览器开发者工具

先麻溜打开浏览器按F12，右上角那排手机图标差点被我当垃圾广告无视了。点开发现能选不同手机型号，立马把页面拖成iPhone12模样。看着字体挤成二维码的鬼样子，赶紧把CSS里的固定宽度px改成%，又折腾半天media query设置不同屏幕的样式。手指粗戳不准按钮？顺手加了个padding:10px 总算能戳中了（这玩意儿还得开着模拟器刷新十几次才调顺眼）

2. 捡到免费调试神器

朋友看我屏幕挤满代码憋屈，甩来个安装包说能连真机调试。手机开了开发者模式连着USB线，电脑浏览器里居然跳出来我手机屏幕！手指划过按钮会冒出蓝色边框，点一下控制台直接显示哪个CSS文件第几行。最绝的是能实时改代码，我在电脑上删个margin-right，手机页面立马把多余空白吞了（以前用笔记本触控板拖动调试的蠢日子结束了）

3. 被图片坑到血压飙升

刚美滋滋上传页面，甲方发来截图吼怎么加载这么慢。查了半天发现首页五张商品图全是3MB大宝贝！火速搜在线压缩工具，拖进去咔嚓掉70%体积还看不出来像素点。最良心是连缓存都帮我清改前后对比图左右排开跟找不同似的（省下去淘宝买PS会员的30块）

4. 手贱点的免费UI框架

熬夜写汉堡菜单按钮时手指头快抽筋了，偶然看到现成的导航栏组件库。下载解压后照着文档Ctrl+C/V，改改颜色和文字就弹出个会滑动的侧边栏。最感动是自带各种手机屏幕的兼容方案，省下我对着华为折叠屏骂街的时间（虽然默认样式丑得连夜改了字体）

5. 关头的分数考官

交差前突然想起要测性能，打开浏览器插件点Audits开始算分。红色警告哐哐砸脸：图片尺寸超标、JS阻塞渲染、缓存没设置...按着建议把jpg转成webp格式，合并了六个CSS文件，分数从28蹿到82（甲方手机4G网络加载终于不用等转圈圈了）

现在工具箱就固定这五件套，电脑右下角天天弹内存不足警告。不过上次靠这套流程三天交货，甲方多打了20%奖金（工资再涨真得换电脑了）