你可能会说
手机上打开整个挤成一团了，帮我改改
一套页面自动适配手机、平板和电脑，不跑版
大白话解释
响应式就是让同一个网页，在大屏电脑上排成一排，到手机上自己堆成一列。你不用为手机单独做一套站，页面会看屏幕大小自己调整。
像一件会自己改尺码的衣服：穿在一米八的人身上是加大号，穿在一米六的人身上自动收成小号，但版型还是那个版型。
实现靠的通常是断点、弹性布局和网格这三样，再加一个视口设置，让页面知道自己在什么设备上。
什么时候会遇到
- 页面在自己电脑上看着挺好，同事用手机一打开，字全挤成一团。
- 老板拿着手机说「这里怎么点到一半就点不着了」。
- 上线前要在手机、平板、笔记本上各截一张图对比，这就是在验响应式。
- 按 F12 切到手机视图，页面立刻错位。
- 设计稿只给了电脑版，你得自己补出手机版该怎么排。
- 用户反馈横屏时导航栏挡住了正文。
可以直接对 Agent 说
「这个页面在 375 宽的手机上乱了，导航栏挤成两行。帮我改成手机上一列铺满、平板两列、电脑三列的响应式布局，改完把关键样式贴出来给我看。」
「用开发者工具按 iPhone 12 的尺寸检查 src/pages/Home.tsx，把所有溢出的元素和字号过小的地方都列出来并修掉。」
「给这个已有的桌面端页面补上响应式支持，重点处理导航栏、卡片列表和表格三处，手机端不要出现横向滚动条。」
正文里带下划线的词，是本站其它词条的入口；这一篇自动链了 3 个相关术语。
最容易想岔的地方
常见的错误理解： 响应式就是加几个媒体查询，屏幕变窄就把字号缩小
更准确的理解： 缩字号只会让手机上更难读。响应式真正要改的是布局结构 —— 三栏变一栏、侧边栏收起来
常见的错误理解： 在浏览器里拖动窗口试过没问题，就算做完了
更准确的理解： 真实手机上还有触摸目标大小、横屏、输入法顶起页面这些情况。不拿真机看一遍，等于没测
测一下：真遇到了你会怎么处理
单选 · 选完立刻看解释
老板说「我们再做一个手机版页面吧」，但你们只有一个人的前端人力。
更省事也更稳妥的做法是？
-
响应式的价值是同一份内容维护一处。布局随屏宽变，逻辑和文案只写一遍。
-
等于两套代码两套维护，改一个功能要改两遍，长期一定会不同步。
-
字会小到没法读，点击热区也会缩到手指点不中，等于没做适配。
题目只考「这个场景下的第一反应」，不考名词背诵 —— 响应式的定义在上面已经讲过了。