术语图鉴/设计风格/响应式设计
切换Esc返回

响应式设计 Responsive Design

你可能会说

参考响应式设计风格帮我美化界面。

页面根据屏幕大小自动调整布局。

页面根据屏幕大小自动调整布局。手机上看是单列,平板两列,电脑三列——同一份代码适配所有设备。

也常被叫作Responsive Design

生活类比

像水——倒进什么容器就变成什么形状。响应式页面在任何屏幕上都「刚刚好」。

🎮 动手试试

选择题选择一个你认为最合适的答案

关于「响应式设计」,以下哪个描述最准确?

你可以这样告诉 AI

帮我把这个页面改成响应式布局:小于 768px 手机端单列堆叠、768-1024px 平板两列、大于 1024px 桌面三列,图片要自适应不超出容器。

容易混淆?这样区分

响应式设计 Responsive Design
断点 Breakpoint

响应式设计是页面随屏幕自适应调整的整体策略;断点只是其中触发布局切换的具体宽度阈值。

什么时候用

任何面向多端用户的 Web 项目

现代 Web 必须响应式——用户可能从手机、平板、笔记本、台式机访问,用媒体查询或 Tailwind 断点让同一套代码在所有屏幕上都可用。

和 AI 协作时

想让 AI 做响应式布局,直接说「这个页面要做响应式:手机单列、平板两列、桌面三列,用 Tailwind 的 sm/md/lg 断点或 CSS media query 适配」。

什么时候不用

纯桌面端内部工具

只在一台固定显示器上使用的内部管理系统可以不考虑响应式——适配多端的成本大于收益,固定宽度反而更可控更好维护。

与打印版式和固定尺寸邮件无关

PDF、印刷海报、营销邮件(固定宽度 600px)不需要根据屏幕自适应,完全不需要响应式设计。

组成结构 · Anatomy

1
核心概念Core

页面根据屏幕大小自动调整布局。手机上看是单列,平板两列,电脑三列——同一份代码适配所有设备。

2
实际表现In Practice

像水——倒进什么容器就变成什么形状。响应式页面在任何屏幕上都「刚刚好」。

3
与 AI 的关联AI Context

和 AI 沟通时提到「做响应式」,它会用媒体查询或 Tailwind 的 sm:/md:/lg: 前

典型使用场景

改产品列表页
告诉 AI「帮我把这个产品列表改成响应式:手机单列、平板两列、桌面三列 Grid 布局,图片用 srcset 适配不同分辨率,导航在小屏变成汉堡菜单」
想弄懂概念时
告诉 AI「用大白话给我解释什么是响应式设计,举个生活中的例子」

延伸阅读