响应式
Responsive Design
样式与 CSS也叫：响应式布局、响应式设计、自适应、RWD
一句话：同一套页面根据屏幕宽度自动调整布局，在手机、平板和电脑上都能正常浏览和操作。
详细解释
响应式是一个目标：一套代码适配不同尺寸的屏幕，而不是给手机单独做一个网站。比如电脑上三列卡片，平板变两列，手机变一列；横向导航菜单到手机上收进汉堡按钮；侧边栏在小屏上变成抽屉。
实现手段有三类：弹性布局（Flex、Grid、百分比宽度，让元素自己伸缩）、媒体查询（到某个宽度切换样式）、相对单位（rem、vw）。「在哪个宽度切换」的那个数值叫 断点。三者关系是：响应式是目标，媒体查询是工具，断点是工具里的具体数值。
常见做法是「移动优先」：先写手机样式，再逐步为更宽的屏幕补充样式。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
首页要做响应式：电脑上卡片每行 3 列，平板（768px 以下）每行 2 列，手机（480px 以下）每行 1 列；手机上顶部导航菜单收进右上角的汉堡按钮，点击后从右侧滑出；手机上按钮高度至少 44px，方便手指点击。