响应式布局最常出的问题不是"整体错乱"，而是"桌面正常，手机上某一个模块错位"。这种问题用手机真机调试很难发现，因为你要来回切换设备。

把桌面端和移动端并排放在同一个画布上，问题一眼就能看出来：哪个模块宽度溢出、哪个文字换行不对、哪个按钮被压扁。

常见的响应式陷阱：

• 固定宽度容器：写成 width: 1200px 而不是 max-width，在手机上会横向滚动；
• 图片不响应：没加 max-width: 100%，在小屏上撑破容器；
• flex 不换行：没加 flex-wrap: wrap，子元素挤成一团；
• 断点选择错误：只在 768px 设了断点，但手机横屏是 812px，此时布局用的是桌面样式；
• viewport 缺失：<meta name="viewport"> 没写或写错，整个页面按 980px 宽度渲染后再缩小。

在下方预览器输入网址，桌面端和手机竖屏会同时加载，从左到右一眼对比。