技能介绍

为什么需要这个技能

移动优先的响应式布局容易做错：先在大屏上搭出复杂结构，再用手机适配，结果 grid、flex、媒体查询混在一起，断点难维护，真实内容一变就溢出。这个技能面向日常开发中的具体布局问题：导航栏、卡片列表、侧边栏、Hero 区、Masonry 网格和吸顶头部等。它不替你决定产品形态，而是把布局选择和验证步骤整理成可重复的工程流程。

技能如何工作

核心流程是先识别布局模式，再从最小视口开始实现，然后逐级放大：

识别模式：判断是页面级布局、卡片内容对齐、导航条、卡片网格、Hero Section、Masonry Grid 或 Sticky Header。
移动优先：基础样式面向小屏，保证内容可读、可滚动、可操作；不先堆桌面端装饰。
选择 CSS 技术：导航条、内容对齐、居中、空间分配和未知数量项用 flex；页面骨架、定义好的卡片网格、复杂二维结构和重叠元素用 grid。现代场景可考虑 container queries。
加断点：为更大屏幕增加断点，常用验证点包括 320px、375px、768px、1024px、1280px+。
响应式排版：字号、行高和间距随视口变化，不能只调容器宽度。
跨视口测试：用真实内容验证，不要用 lorem ipsum；同时测长短标题、多行文本、图片和极端内容。

适用边界与注意点

它适合作为布局建议和检查清单，不是自动重构工具。涉及发送、发布、删除、付款、部署或其他外部写入前，应先展示目标和影响并取得明确确认。命令与代码默认作为参考，只有在你明确要求且目标范围清楚时才执行。凭据只用于对应官方服务，不回显、不记录、不转发。不自动安装依赖、修改系统权限、创建持久化任务或执行下载内容。