技能介绍

先确定问题

很多页面的响应式是事后补丁：先在 1920px 画好桌面布局，再用媒体查询塞进小屏，结果内容被 display:none 藏掉，交互在触控设备上失灵，图片加载后布局跳动，横向滚动条偷偷出现。这个技能要解决的不是“适配几种设备”，而是让布局、断点、媒体和排版从最小视口开始就成立。

技能如何工作

它以移动优先和内容优先为主线，先处理最重要的内容，再逐步增强。核心步骤包括：用百分比宽度和 max-width 容器建立 12 列弹性网格；CSS Grid 负责二维结构，Flexbox 负责一维组件；CSS 基础样式写给最小视口，通过 min-width 媒体查询向更大屏幕扩展；图片使用 srcset 提供至少 400px、800px、1200px 三个尺寸，并设置 width、height 与 loading="lazy"；排版用 rem、em 或 clamp()，行宽控制在 45–75 字符。

断点不按 iPhone、iPad 的具体宽度写，而是在内容开始错位或交互变得别扭的地方设置，通常保留 320–480px、768px、1024px、1440px 作为参考区间，最多 4–5 个。触控目标至少 44×44px，可点元素间距至少 8px，并给 hover 提供 tap/click 替代。桌面端保持导航可见，汉堡菜单只留给放不下的视口。

适用边界与注意点

它主要覆盖布局、图片、排版、导航和触控优化，不自动安装依赖、修改系统权限或执行下载内容。遇到发送、发布、删除、付款、部署等外部写入，应先展示目标和影响并取得明确确认。命令和代码默认是参考，只有用户明确要求且目标范围清楚时才执行。最终验收应检查 320px、768px、1024px、1440px 等关键视口，确认没有横向滚动、图片尺寸属性齐全、断点之间布局稳定。