响应式设计
Responsive Design也常被叫作：自适应适配手机移动端适配
「同一个网页，电脑上好看，手机上一打开就乱成一团，能不能让它自己适应？」
响应式设计 Responsive Design
让同一个页面根据屏幕宽度自动调整布局，一套代码适配电脑、平板、手机。
响应式设计的意思是：同一个页面，一套代码，在不同宽度的屏幕上自动换样子。 屏幕宽就一排放三个卡片，屏幕窄就一列叠起来；导航放不下就收进一个按钮。它不是给手机单独做一个网站，而是让布局规则里带上「屏幕多宽时怎么排」的条件。
实现它的三个常用工具：弹性布局（用相对单位，不写死像素宽）、媒体查询（「当宽度小于 768px 时按这套规则排」）、可伸缩图片（图片跟着容器走，不撑破屏幕）。判断一个页面做没做响应式，最简单的测试就是把浏览器窗口从宽拖到窄，看它有没有跟着变。
最容易翻车的地方：电脑版做完了，手机版从没被真正看过一眼。 AI 写代码时默认在宽屏上验证，窄屏下的错位、重叠、被截断它看不到。所以验收响应式必须真把窗口缩到手机宽度（或用开发者工具的设备模拟）逐个检查，而不是只看截图。还要注意：响应式是「同一套内容重新布局」，不是「把字缩小到看不见」——缩小只是让内容活着，不是让内容可用。
长什么样 真实可交互，不是截图
文字重叠、横向滚动、按钮点不到
字号可读、按钮够大、不用横滑
同样的内容，三个宽度三种排法——这就是响应式。验证方法也写在这里了：把窗口拖窄，看它变不变。
拆开看，里面有这几块
-
1
断点 Breakpoint
布局切换的宽度阈值，常见 768px、480px。
-
2
媒体查询 Media query
「当屏幕满足某条件时应用这套规则」的 CSS 写法，是响应式的核心开关。
-
3
弹性布局 Fluid layout
用相对单位让元素随容器伸缩，而不是写死像素宽。
-
4
可伸缩图片 Fluid images
图片宽度跟随容器，最大不超过屏幕，不撑破布局。
-
5
移动端视口 Viewport meta
告诉手机「按真实屏幕宽度渲染」。不写它，页面会被整体放大显示。
常见的有哪几种
先做宽屏，再用媒体查询适配窄屏。
用在：桌面端是主要使用场景
先做窄屏，再逐步增强宽屏。
用在：手机用户为主
只在少数几个固定断点切换布局，而不是连续变化。
用在：设备类型固定、实现求简
容易搞混？这样区分
响应式是一套代码自己适应宽度；独立移动站是另一套页面（常见独立域名）。两套页面等于两套维护、两套内容同步问题。
响应式是重新布局（元素移动、堆叠、重排）；缩放只是把字变小。把字缩小不叫响应式，手机上那叫「内容活着但没法用」。
什么时候用得上
先在开发者工具的设备模拟里看，确认是断点没设还是弹性没做，再对症改。
至少验 3 个宽度：手机 375px、平板 768px、桌面 1280px。
图片没限最大宽度。加最大宽度限制，图片就跟着容器走了。
你可以这样跟 AI 说
直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。
【任务】把 [页面 / 组件] 做成响应式，适配手机、平板、桌面 【目标】 1. 在 1280px、768px、375px 三个宽度下都能正常使用：不横向滚动、不重叠、不截断 2. 手机宽度下：导航收进按钮、卡片单列堆叠、点击区域高度 ≥44px 3. 图片不撑破屏幕，手机字号可读（不是单纯缩小） 【边界】 - 不要为「适配」改动内容顺序和语义结构 - 不要新建独立手机页面或域名 - 不要用 JS 判断屏幕宽度来实现，能用 CSS 就用 CSS 【交付】 1. 改了哪些文件、加了哪些断点和规则 2. 我自己怎么验证：浏览器缩到哪几个宽度、每个宽度该看到什么 3. 你在哪个宽度实际看过、哪个宽度没验证
「不要用 JS 判断屏幕宽度」挡掉了最常见的偷懒写法——JS 判断在窗口变化、旋转时会闪变、出 bug，CSS 媒体查询才是正路。「哪个宽度没验证」逼它承认验证范围，别让它拿桌面截图蒙混。
它说「做好了」，你怎么自己验
这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。
要亲眼看到这些，才算数
- 把浏览器窗口从宽拖到窄，页面跟着变，窄到手机宽度时没有横向滚动条。
- 用开发者工具的设备模拟，依次看 375px / 768px / 1280px：内容不重叠、不截断、不跑到屏幕外。
- 手机上点主要按钮 / 链接，能点到，点击区域够大。
- 图片没有撑破屏幕，文字没有小到看不清（也不是靠缩小字）。
- 旋转屏幕（竖→横）后布局仍可用，没有内容跑出屏幕。
它常这么糊弄你
- 「已做响应式适配」——但只验过桌面宽度。要求它列出在哪个宽度实际看过。
- 「手机上没法看，但代码是对的」——没验证过的不叫做完。
- 把字缩小、内容截掉，声称「已适配手机」——那叫内容活着，不叫可用。
- 用 JS 判断宽度做切换，声称「更灵活」——窗口变化、旋转时会闪变、卡住，CSS 媒体查询才是正路。
响应式能验到「主路径」层：真实用户在不同宽度设备上的正常操作走通。全程在浏览器里就能做，不需要看代码。
考考你 选一个你觉得对的
验收「响应式」最有效的动作是？
响应式是对「不同宽度」的承诺，验证就必须在不同宽度下做。A 覆盖了三个典型宽度和三类问题；B、C 只看电脑端等于没验；D 是把验收交给被验证方。