上周接了个外包单子，甲方非要我把他家网页改成在手机和电脑上都能正常显示。我寻思不就是调个尺寸嘛结果刚动手就被现实抽了一巴掌。

一、被手机屏逼到墙角

用笔记本吭哧吭哧做完首页，美滋滋发给客户看。两分钟后微信炸了："你这按钮咋叠成俄罗斯方块了？"。打开自己手机一看——导航栏把标题挤成压缩饼干，注册按钮直接离家出走半公里。当时血压就上来了，这破屏咋还看人下菜碟？

二、扒着大佬代码偷师

连夜翻出收藏夹吃灰的教程，盯着人家网页按F12反复折磨。发现三招救命符：

• 手机页面缩放控制：在html头部加了个<meta name="viewport" content="width=device-width">，总算阻止了页面自作聪明缩放
• 尺寸别写死：把
  这种要命写法全改成

  ，图片也学会用srcset自适应
• 流式布局：旧版float排版直接扔进垃圾桶，换成display:flex这种自动伸缩的排版模式

三、媒体查询实战翻车实录

听说@media是响应式的核心武器，兴冲冲写了段：

当屏幕小于600px时，把导航栏从横排变竖排。结果测试时疯狂抽搐——在599px和601px之间反复横跳，菜单跟抽风似的上下抖。原来忘加过渡动画，紧急补了行transition: all 0.3s ease才稳住。

四、字体踩的惊天巨坑

以为万事大吉时客户又发飙："平板上看字小得要用放大镜！" 这才发现所有字号用的绝对单位px。连夜把font-size全改成rem单位，在html根元素设置基准值：

html{ font-size:14px }

@media(min-width:768px){ html{font-size:16px} }

@media(min-width:1200px){ html{font-size:18px} }

终于让文字会自己长个儿了。

五、终极杀手锏：断点测试

交稿前架着三台设备同时刷新：

• 手机竖屏：重点查按钮间距，汉堡菜单弹窗位置
• 平板横屏：盯着表格会不会撑破容器
• 电脑大屏：检查内容区域是否无限拉宽变报纸

拿手指在屏幕上疯狂缩放时，突然理解为什么大佬说响应式不是技术是体力活——这玩意儿得拿真机一寸寸磨出来。

现在这网页总算像样了：左边架着14寸笔记本，右边开着6寸手机，同一个网页像变形金刚似的切换形态。甲方今早发来个