网页与程序协作
Responsive Design
响应式布局
免费阅读 · 配套小练习 · 更新于
一句话理解
让同一份网页在不同屏幕宽度下都能阅读和操作。
打个比方
同一套家具放进大房间和小房间，排列方式可能不同。响应式布局让内容根据可用空间调整，而不是把整张桌面页面缩小。
响应式设计常结合弹性宽度、可换行布局、图片约束和媒体查询。媒体查询可以在满足宽度等条件时应用样式。HTML 的 viewport 设置也很重要。断点应依据内容是否放得下选择，而不是假设所有手机尺寸相同。
看个例子
<style>
body {
box-sizing: border-box;
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 24px;
}
h1 { font-size: 32px; }
@media (max-width: 480px) {
body { padding: 16px; }
h1 { font-size: 24px; }
}
</style>当你要求 AI 适配手机，可以检查它是否合理调整宽度、间距和字号。这段样式放在 HTML 示例的 head 中，保留 viewport；较宽时内容最多 720px，不超过 480px 时标题与边距变小。最终仍要切换窗口宽度验证。
什么时候会遇到
- 给 AI 提供手机上挤压或溢出的具体现象和截图。
- 在窄屏与宽屏分别验证 AI 的布局修改。
常见误解
开发者工具的手机尺寸预览有帮助，但不能证明真实设备上的触控、键盘和加载表现都正常。
Vibe Coding 小练习 · 描述需求 → 看懂改动 → 验证结果
动手练一练：向 AI 描述手机问题，检查两种宽度
使用自己的介绍页，先在窄窗口记录拥挤、溢出或遮挡的实际位置；也可用上方示例练习审阅样式。
试着这样告诉 AI
请检查介绍页的手机布局：在约 390px 宽的视口下，正文与链接完整可见，整页不横向滚动；约 900px 宽时仍正常阅读。保留现有内容，先说明问题位置和调整方案，再修改相关样式。不要通过裁掉内容来隐藏溢出。完成后给出两种宽度的检查项。可以在你使用的 AI 编程工具中完成；也可以先对照本页代码示例，练习理解需求、识别改动和列出检查项。
跟着做
- 把页面、窗口宽度、问题位置与期望结果交给 AI；有截图时一并说明要关注的区域。
- 查看它修改了哪些宽度、间距、字号或媒体查询，检查是否仍保留原有内容。
- 切换约 390px 和 900px 两种宽度，观察内容与链接；把仍存在的问题和复现方式反馈给 AI。
你应该看到
两种宽度都能阅读和操作，且没有靠裁切重要内容掩盖问题。
完成检查
- 窄屏不横向滚动，文字与链接完整。
- 宽屏布局仍正常，检查结论说明用了哪些视口。
遇到卡点？看提示
提供“哪一处、什么宽度、出现什么现象”，比只说“适配手机”更容易验证。
查看参考思路
可以对照弹性宽度、间距和媒体查询理解改动；实现不必与示例完全相同。要分别查看窄屏和宽屏，浏览器尺寸预览通过后，真实手机仍可补充验证。
想一想
用 overflow-x: hidden 藏起溢出的内容，就算修好了吗？
查看答案
不一定。它可能把重要内容裁掉。应先查找过宽的元素，并调整宽度、换行或排列方式。