响应式 UI 设计，是让同一套内容根据可用空间改变排列、尺寸和展示方式，使电脑、平板与手机上的主要任务都能完成。它不只是把桌面页面等比例缩小，也不等于为三个设备各画一张互不相干的稿子。关键是说明：哪些元素伸缩，哪些换行，什么时候换列，哪些操作要始终可用。
开始前，先选一个真实模块：例如包含封面、课程名、简介和按钮的课程列表。用墨刀设计整理它的容器、组件和自动布局，再逐步改变宽度，布局规律会比孤立的设备截图更清楚。
响应式UI设计的核心概念
断点：内容何时需要重排
断点是布局规则发生变化的条件，不是必须背下来的手机型号表。导航标签开始相互挤压、两列卡片的文字只剩几个字一行，都是应该改变布局的信号。先观察内容承受不住的宽度，再设断点。
例如，三张卡片每张至少需要280 CSS px，两道间距各24px，两侧内边距各24px，那么容器至少需要280×3＋24×2＋24×2＝936px。宽度小于936px时，应考虑减少列数，而不是把卡片字体不断缩小。这里的280px是这组内容的设计选择，换一种内容，临界点也会改变。
768px、1024px可以用作项目里的起始参照，但不是行业强制分界；平板分屏、桌面窗口和浏览器缩放都会改变实际可用空间。交付时写明依据，比只标“手机断点”更有用。
流式布局：空间怎样分配
流式布局让元素在范围内伸缩。它同时需要最小尺寸、最大尺寸和剩余空间的分配方式：
- 正文容器可以随窗口变宽，同时设置最大宽度，防止每行文字过长。
- 图片随所属容器缩放，并保留宽高比；人物头像和Logo不能被横向拉扁。
- 卡片按列分配空间，列间距也计入总宽。三张33%宽的卡片再加间距，可能导致横向溢出。
- 按钮通常跟随文案增长，搜索框则可以占据剩余空间；“auto”并不意味着所有元素都自动填满。
响应式与自适应的区别
响应式通常用可伸缩的布局和媒体查询响应宽度变化；自适应常指为若干环境准备不同布局。日常交流里这两个词也会混用，交付时应直接说明元素怎样变化，而不是只给标签。
响应式布局会随着屏幕连续变化（流动、伸缩、重新排列）
- 为几个特定宽度单独准备布局，也需要说明区间之间怎样显示。
从两列变为一列完全可以是响应式设计的一部分，不应因为发生了断点切换，就把它归为另一套方法。web.dev的媒体查询教程把断点与内容可读性结合起来解释，这比背诵设备尺寸更适合入门。
栅格：统一列宽与间距
栅格为页面提供共同的对齐规则。12列常用于桌面布局，因为它容易分成2、3、4或6份；手机可以采用更少列，也可以直接使用内容容器与间距规则。12列不是响应式设计的必需条件。
假设内容区宽1200px，采用12列、列间距24px，则每列宽度为（1200−11×24）÷12＝78px。一张跨4列的卡片应包含4个列宽和中间3道间距，宽度为384px。设计与开发如果对“跨4列”是否包含间距理解不同，界面就会错位。
组件：分别定义伸缩规则
同一页中的组件不必采用同一种伸缩方式。把它们拆开定义，更容易定位适配问题。
| 组件 | 空间变窄时 | 不应丢失的内容 |
|---|---|---|
| 顶部导航 | 减少外间距，再把次要入口放入菜单 | 当前所在位置和主要操作 |
| 图文卡片 | 多列改少列，横向改纵向 | 标题、判断所需信息和打开入口 |
| 筛选工具栏 | 条件换行或进入可展开面板 | 已选条件与清除操作 |
| 数据表格 | 优先保留关键列，必要时表格内部横向滚动 | 每一行的身份、状态与操作归属 |
| 对话框 | 限制最大高度，内容区允许纵向滚动 | 标题、关闭与确认按钮 |
不要为了塞进手机而隐藏价格条件、错误提示或必要字段。必须折叠的内容要有可发现的入口；只在鼠标悬停时出现的操作，也需要手机上的触发方式。
在墨刀设计中组织布局规则
练习时需要的不是最多功能，而是能整理组件、设置布局关系并对比多个宽度的设计文件。墨刀设计提供自动布局与组件能力，可用来表达这些规则；不要把绘制好的桌面稿默认当作已生成全部移动布局。
先理解父容器与子元素
先从一个容器开始：放入标题、描述、图片和按钮，再调整方向、对齐与间距。理解父容器和子元素的关系后，再复制成多张卡片。自动布局是按设置工作，不会自动理解产品的信息优先级。
对比不同宽度的画板
至少准备宽屏和窄屏两个参照画板，比较长标题、导航和图片位置。截图之间看着正常还不够，继续改变中间宽度，观察内容是在什么位置开始拥挤。
给自动布局设置边界
在自动布局中分别确认固定宽度、随容器伸缩和随内容增长的对象。卡片是否换行、元素能否缩小、间距怎样保留，都取决于你的配置；组件没按预期变化时，先检查父容器和子元素的尺寸规则。
从常用组件开始练习
先练习卡片、导航和表单这类结构明确的模块。可以从现有文件或素材中选取组件，分别观察固定宽度、内容撑开、容器伸缩三类尺寸设置。复用组件前，把标题改长、把图片替换为不同尺寸，确认内容变化后的行为。
组件库能减少重复绘制，但信息顺序仍要由设计者决定：课程列表可以移动封面位置，却不应把“查看课程”放到无法判断所属课程的位置。
创建文件、网格与页面布局
先建一份设计文件，准备宽屏与窄屏画板；随后设置网格、建立模块、调整容器宽度。下面的工作台、网格和网页截图可以帮助定位工具区域，卡片列表则用来练习具体的尺寸关系。
进入墨刀设计工作台
进入墨刀设计官网，注册或登录你的账户即可进入工作台界面。无需安装客户端，只需要浏览器即可开始设计。
新建设计文件
在墨刀工作台中点击 「新建设计文件」，即可创建一个全新的墨刀设计项目，进入画布编辑页面。这里就是你之后绘制网页界面的工作空间。
设置画板网格
选中画板后，在属性区域查看布局网格设置，明确列数、列间距与左右边距。先让正文、图片和卡片共享对齐线，再决定它们跨几列。网格只是辅助规则，不会自动把桌面内容变成合理的手机布局。
绘制页面并配置自动布局
在墨刀设计中绘制界面并不复杂，你只需要用到矩形、图片、文本、卡片模块、导航栏等基础工具就能把网页结构搭出来，重复排列的卡片、导航项和表单适合用自动布局组织，装饰图形等元素则可按需要单独定位。你只需选中一个容器（例如卡片列表或 Banner 区），在右侧属性栏开启自动布局，再设置布局方向、对齐方式、内外间距以及拉伸方式（固定宽度或随画板变化）。
调整容器宽度后，观察标题是否换行、图片是否保持比例、按钮是否仍在卡片内部。如果超出边界，先看子项是否设置了不合适的固定宽度，再判断是否应改列数，不要直接压缩整张画板。
预览设计并说明实现规则
完成界面后，在当前文件支持的预览方式中检查交互，并把不同宽度的设计规则分享给团队。设计稿可以帮助发现视觉问题，但网页是否真正响应容器、键盘和浏览器缩放，还需在实现后检查。不要用单张手机效果图代替这些测试。
卡片列表从三列变成一列
课程列表的每张卡片包含封面、课程名、两行简介和“查看课程”按钮。先准备三个长短不同的标题：“界面设计基础”“组件与设计系统”“为多终端产品设计响应式布局”。同一份内容，比三张都写“标题”的卡片更容易暴露问题。
| 内容空间 | 列数与计算 | 文字和按钮的处理 |
|---|---|---|
| 1200px内容区 | 3列，间距24px；每卡（1200−48）÷3＝384px | 标题可换行，按钮在卡片内保持一致位置 |
| 768px内容区 | 2列，间距24px；每卡（768−24）÷2＝372px | 卡片内容按实际长度增长，不裁掉必要信息 |
| 390px画板 | 两侧各16px，1列；卡片宽358px | 图片保持比例，正文正常阅读，按钮保留内边距 |
表中前两行使用“内容区宽度”，第三行使用“画板宽度”，不能混在一起计算。完成参照画板后，继续试520px、900px等中间宽度，观察是否需要提前减列；不要只检查三张预设尺寸。
- 先把卡片内部设为纵向排列，并明确图片比例、文字区与按钮的空间。
- 再把卡片放入父容器，配置间距和列数变化。
- 把第二个标题换成长文案，给一张卡片留空封面，检查高度是否合理增长。
- 记录改变列数的条件，以及标题需要完整显示还是允许截断。截断时补充查看完整名称的方式。
最终应能解释每一处变化，而不是只得到三张外观相似的页面。文字样式可结合UI字体排版指南统一，按钮热区则参照UI尺寸规范单独处理。
手机出现横向白屏，先检查哪几处
页面能在电脑里缩到390px，并不代表真机一定没有问题。出现左右滑动或半屏白边时，先定位超出视口的元素，再修复宽度来源。
- 固定宽度：桌面容器、表格、代码块或图片仍然写死较大宽度。让普通内容受父容器约束，确需横向浏览的内容独立滚动。
- 不肯缩小的子项：弹性布局中长网址或长标题撑开容器。检查子项的最小宽度与换行规则，而不是隐藏全部溢出。
- 看不见的装饰或菜单：绝对定位图片、未收起的侧栏仍占据页面范围。隐藏状态和定位范围也要一起处理。
- 缺少视口设置：实现后的网页需要正确设置 viewport，否则手机可能按更宽的虚拟布局渲染。设计稿中没有对应按钮，需要开发在页面代码中处理。
- 固定底部操作：软键盘出现、系统字体放大或横屏后，操作可能覆盖最后一行。为内容保留空间并测试焦点所在字段。
这些实现细节可参考MDN响应式网页设计。用隐藏全页横向溢出的方式掩盖问题，可能同时裁掉本来需要操作的内容。
用不同页面继续练习
练习时重点观察别人怎样保留信息优先级，而不只是临摹外观。可以沿用下面三种方式，每次记录一种具体的布局变化。
观察网站怎样改变布局
选择一个自己熟悉的网站，如Airbnb、Apple或Dropbox，观察同一模块在不同宽度下的排列，再判断它是否适合你的内容。学习的是变化规则，不必照搬整套风格。
你可以打开这些网站的手机端、平板端、桌面端，对比它们在不同尺寸下的布局变化，观察哪些区域会缩放、哪些会换行、哪些会折叠，再用墨刀设计在自己的画板上还原一遍。通过这种方式，你能真正理解什么是合理的响应式结构。
拆解组件库中的布局
Ant Design、Material UI等组件库可作为布局规则的学习对象，但要查看对应版本的文档，不能认定每个组件都会自动适配所有设备。墨刀素材广场可以用于寻找组件样张；是否免费、是否可编辑及使用范围以详情页为准。
从一个小模块逐步扩展
不需要一次完成整站。可以分别练习导航栏、卡片区、文章列表和产品详情模块，每次只处理一个明确的布局问题，记录修改理由，再逐步组合成页面。
