响应式布局实训报告：别再死磕媒体查询了，这3个坑我替你踩了

响应式布局实训报告

做前端这几年，最烦的就是听新人说“我写好了，就是手机上显示不对”。真的，每次听到这句话，我都想把手里的咖啡泼过去。不是咖啡不好喝，是这问题太典型了。今天这篇响应式布局实训报告，我不讲那些虚头巴脑的理论，就聊聊我踩过的坑，还有你们现在正在踩的坑。

先说个数据。去年我们团队接了15个项目，其中80%的返工都出在移动端适配上。为什么？因为大家太依赖媒体查询（Media Queries）了。觉得只要@media screen and (max-width: 768px) { ... } 就能搞定一切。天真。太天真了。

我有个学员，叫小李。这孩子挺聪明，代码写得也整洁。但他做了一个企业官网，PC端完美，iPad端也还行。一到iPhone SE或者某些安卓低端机上，导航栏直接炸裂。文字重叠，图片变形，按钮点不到。他查了一周，最后发现是用了固定像素px做宽度。

这就是第一个坑：不要用固定单位。

在响应式布局实训报告中，必须强调这一点。用rem，用em，或者直接用vw/vh。我推荐vw和vh，尤其是对于现代浏览器。比如，你的容器宽度，别写width: 960px; 写width: 90vw; max-width: 1200px; 这样既保证了在大屏上的最大宽度，又在小屏上自动收缩。

第二个坑，图片处理。

很多新手写。看着没问题对吧？错。如果图片本身是4000x3000的大图，在小屏上加载慢不说，还会因为浏览器缩放导致模糊。要用picture标签，或者srcset。

举个例子：

这样写，小屏只加载400px宽的图片，速度快，清晰度高。大屏加载高清图。这才是专业的做法。我在做响应式布局实训报告时，都会把这个作为重点案例。

第三个坑，Flexbox和Grid的滥用与误用。

Flexbox适合一维布局，Grid适合二维。别什么都用Grid，也别什么都用Flex。比如导航栏，用Flex；后台管理页面的卡片列表，用Grid。

但是，注意！Grid的auto-fill和auto-fit经常让人困惑。

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

这行代码，能自动换行，自动调整列宽。比写一堆媒体查询强多了。但是，如果内容高度不一致，Grid可能会留下奇怪的空白。这时候，得配合align-items: stretch; 或者给子元素设min-height。

我有一次调试，就是因为没设min-height，导致底部留白巨大，客户以为我偷懒。其实是因为Grid默认对齐方式的问题。

还有，别忘了测试。

别只在Chrome开发者工具里看。要用真机。安卓和iOS的渲染引擎不一样。Safari的弹性盒子支持虽然好，但有些边界情况还是和Chrome不同。比如，iOS上的1px边框问题，还有滚动条的样式差异。

我在做响应式布局实训报告时，会要求学员必须用Safari和Chrome分别测试。

最后，总结一下。

响应式布局不是玄学，是科学。它需要你对盒模型、流式布局、弹性盒子有深入的理解。不要试图用一套代码解决所有问题，那是神话。要接受不同设备有不同的表现，只要保证核心内容不崩坏，交互不失效，就是成功的响应式。

别再死磕像素了。拥抱流体，拥抱弹性，拥抱测试。

希望这篇响应式布局实训报告，能帮你在接下来的项目中少加点班。毕竟，头发只有一根，掉了就没了。

对了，还有个小细节。字体大小。

别用px写字体。用rem。根元素font-size设为10px或16px，然后子元素用rem。这样用户调整浏览器字体大小时，你的页面也能跟着变。这才是真正的无障碍访问（Accessibility）。

好了，就写这么多。去改代码吧。