响应式UI设计是让同一套内容在不同可用宽度下重新排列，而不是把桌面页面整体缩小。新手可以先做一个卡片列表：宽屏多列、窄屏少列，文字正常换行，按钮仍然容易操作，再把这些规则扩展到整页。
可以用墨刀设计组织画板、组件和自动布局。设计稿负责表达规则，最终网页仍要由实现后的浏览器效果确认；仅打开设计预览，并不能证明网页已经适配所有设备。
响应式UI设计的核心概念
断点：内容何时需要重排
断点是布局规则发生变化的宽度条件。应在内容开始拥挤、导航放不下或文字行过长时考虑调整，而不是按手机型号逐个设点。下面768px和1024px只是方便理解的分组示例，项目中可以采用不同值。
< 768px：手机布局
单列展示为主，内容堆叠、按钮全宽。
768–1024px：平板布局
适合两列内容，图片大小、文字行宽都比手机更舒展。
> 1024px：桌面布局
典型多列布局、固定行宽、内容更丰富。
流式布局：空间怎样分配
流式布局的核心是元素不再用固定宽度，而是跟随屏幕自动伸缩。常用方式：
- 使用相对宽度时，还要计算列间距；三张33%宽的卡片再加间距，可能超过容器宽度。列数变化也需要规则，百分比不会自动替你决定何时换列。
- auto的行为取决于布局环境，不等于任何组件都会自动填满剩余空间；应明确容器使用什么布局、子项怎样伸缩。
max-width 控制最大显示宽度，避免在超宽屏里无限拉伸。
流式布局需要同时规定最小值、最大值与空间分配。图片可以随容器缩放，正文行宽却不宜无限增长；不能只写百分比就认为适配完成。
响应式与自适应的区别
响应式通常用可伸缩的布局和媒体查询响应宽度变化；自适应常指为若干环境准备不同布局。日常交流里这两个词也会混用，交付时应直接说明元素怎样变化，而不是只给标签。
响应式布局会随着屏幕连续变化（流动、伸缩、重新排列）
- 为几个特定宽度单独准备布局，也需要说明区间之间怎样显示。
从两列变为一列完全可以是响应式设计的一部分，不应因为发生了断点切换，就把它归为另一套方法。web.dev的媒体查询教程把断点与内容可读性结合起来解释，这比背诵设备尺寸更适合入门。
栅格：统一列宽与间距
栅格系统几乎是所有响应式布局的基础。最经典的就是12栅格系统，因为12可以被 2/3/4/6 整除，适合各种列数变化，使用栅格系统，页面布局有统一规则，不会凭感觉乱摆，而且元素容易对齐，断点能自然适配。
组件：分别定义伸缩规则
按钮、卡片、表单等会随屏幕改变尺寸、间距、排列方式。
在墨刀设计中组织布局规则
练习时需要的不是最多功能，而是能整理组件、设置布局关系并对比多个宽度的设计文件。墨刀设计提供自动布局与组件能力，可用来表达这些规则；不要把绘制好的桌面稿默认当作已生成全部移动布局。
先理解父容器与子元素
先从一个容器开始：放入标题、描述、图片和按钮，再调整方向、对齐与间距。理解父容器和子元素的关系后，再复制成多张卡片。自动布局是按设置工作，不会自动理解产品的信息优先级。
对比不同宽度的画板
至少准备宽屏和窄屏两个参照画板，比较长标题、导航和图片位置。截图之间看着正常还不够，继续改变中间宽度，观察内容是在什么位置开始拥挤。
给自动布局设置边界
在自动布局中分别确认固定宽度、随容器伸缩和随内容增长的对象。卡片是否换行、元素能否缩小、间距怎样保留，都取决于你的配置；组件没按预期变化时，先检查父容器和子元素的尺寸规则。
从常用组件开始练习
第一次做布局最难的是不知道从哪里开始。墨刀设计自带导航栏、栅格卡片、表单结构、图文模块，这些常用响应式组件这些对新手特别友好，直接改内容，就能理解响应式结构的基本逻辑，不用从0堆框架。
创建文件、网格与页面布局
下面保留新建文件、设置网格与绘制页面的操作参考，并增加一个可独立练习的卡片列表。图中的网站与后面的卡片数据不是同一案例；截图用于定位工具区域，具体入口可能随版本调整。
进入墨刀设计工作台
进入墨刀设计官网，注册或登录你的账户即可进入工作台界面。无需安装客户端，只需要浏览器即可开始设计。
新建设计文件
在墨刀工作台中点击 「新建设计文件」，即可创建一个全新的墨刀设计项目，进入画布编辑页面。这里就是你之后绘制网页界面的工作空间。
设置画板网格
在墨刀设计的编辑页面，选中画板，然后在右侧属性栏中找到「布局网格」即可开始设置栅格系统。这里可以根据你的网页结构自由添加列、网格、间距和边距。整个操作界面非常直观，参数也清晰明了，新手不用研究一堆专业概念就能快速上手，几分钟就能搭出规范的响应式栅格基础。
绘制页面并配置自动布局
在墨刀设计中绘制界面并不复杂，你只需要用到矩形、图片、文本、卡片模块、导航栏等基础工具就能把网页结构搭出来，真正影响响应式效果的关键，是要在绘制过程中尽量全程使用自动布局。你只需选中一个容器（例如卡片列表或 Banner 区），在右侧属性栏开启自动布局，再设置布局方向、对齐方式、内外间距以及拉伸方式（固定宽度或随画板变化）。
调整容器宽度后，观察标题是否换行、图片是否保持比例、按钮是否仍在卡片内部。如果超出边界，先看子项是否设置了不合适的固定宽度，再判断是否应改列数，不要直接压缩整张画板。
预览设计并说明实现规则
完成界面后，在当前文件支持的预览方式中检查交互，并把不同宽度的设计规则分享给团队。设计稿可以帮助发现视觉问题，但网页是否真正响应容器、键盘和浏览器缩放，还需在实现后检查。不要用单张手机效果图代替这些测试。
卡片列表从三列变成一列
假设要做课程列表，每张卡片有封面、课程名、两行介绍和“查看课程”按钮。先准备三条长短不同的课程名，封面统一用同一比例，不要全部使用相同长度的占位文案。
| 练习宽度 | 布局安排 | 文字与按钮 |
|---|---|---|
| 1200px内容区域 | 三列，列间距24px | 标题允许两行，按钮保持可读大小 |
| 768px内容区域 | 改为两列，重新计算卡片宽度 | 检查长标题是否把同行卡片拉出容器 |
| 390px画板 | 两侧各留16px，一列卡片 | 内容按顺序下排，按钮不被底部区域挡住 |
这些数值是练习设定，不是设备分界标准。完成三个参照后，继续试520px、900px等中间宽度。如果520px仍坚持两列导致文字很窄，就把改单列的条件提前；如果900px有过多空白，调整容器最大宽度或列数。不能只检查三张固定画板。
再换成长课程名、空封面和较长按钮文字。封面应保持比例，标题可以换行，按钮保留内边距。需要统一这些文字样式时，可结合UI字体排版指南整理。练习的结果应是一套能解释布局变化的页面规则，而不是声称已经生成可上线网站。
用不同页面继续练习
练习时重点观察别人怎样保留信息优先级，而不只是临摹外观。可以沿用下面三种方式，每次记录一种具体的布局变化。
观察网站怎样改变布局
最有效的练习方式，就是直接学习行业标杆。像Airbnb、Apple、Dropbox这类网站，设计规范、响应式结构清晰，非常适合临摹。
你可以打开这些网站的手机端、平板端、桌面端，对比它们在不同尺寸下的布局变化，观察哪些区域会缩放、哪些会换行、哪些会折叠，再用墨刀设计在自己的画板上还原一遍。通过这种方式，你能真正理解什么是合理的响应式结构。
拆解组件库中的布局
Ant Design、Material UI等组件库可作为布局规则的学习对象，但要查看对应版本的文档，不能认定每个组件都会自动适配所有设备。墨刀素材广场可以用于寻找组件样张；是否免费、是否可编辑及使用范围以详情页为准。
从一个小模块逐步扩展
不需要一次完成整站。可以分别练习导航栏、卡片区、文章列表和产品详情模块，每次只处理一个明确的布局问题，记录修改理由，再逐步组合成页面。
完成练习后，把“容器变窄时改变什么、保持什么”写在设计文件里。能解释每一处变化，比多导出几张设备截图更重要。组件本身的高度和热区还可以结合UI尺寸规范一起整理，再复用于下一页。
