响应式 = 内容像水，流进任何屏幕。不是缩小放大，是为每一种宽度重新做体验👇
🔹 核心思维转变
从固定画布 → 弹性容器
从适配设备 → 服务内容（断点看内容，不看机型）
🔹 两种设计起点
桌面优先：先做大屏，再往手机 “砍内容”
移动优先（推荐）：先做手机核心体验，再往大屏 “加价值”
全球超 60% 流量来自手机，Google 也优先移动端。
🔹 5 种经典布局模式
列下沉：多列 → 变窄 → 自动堆叠成单列
大体流动：列压缩，窄屏变单列，大屏限最大宽
布局位移：不同宽度彻底重排（首页常用）
画布外：小屏藏侧边栏，点按钮滑出（菜单 / 筛选）
细微调整：只改字号、间距，结构不变（文章页）
🔹 内容策略（最容易忽略）
手机端：只留核心信息，次要内容折叠
图片：小屏要重新裁切聚焦，不能直接缩
🔹 导航怎么做
汉堡菜单：省空间，但点击率会降
更好方案：
底部标签栏（拇指热区，强推荐）
Priority+ 优先显示核心项，其余收进 “更多”
🔹 排版关键
行长：中文 20–35 字 / 行 最舒服
标题：大屏大、小屏缩，保持层级
🔹 Figma 怎么做响应式
用 Auto Layout 做弹性结构
同步画：375px / 768px / 1440px 三档画板
🔹 怎么测试
拖浏览器窗口看连续变化
开发者工具模拟设备宽度
一定要用真机测一遍
💡 一句话记住
响应式不是变形，是在每一种屏幕上，都给用户刚刚好的体验。
📚下面这份《UIUX 学习指南》，是我花 1 年时间整理，萃取苹果、谷歌等大厂设计智慧搭建而成的：
• 体系完整又系统，从视觉、交互到用研、产品，覆盖 UI/UX 全链路
• 不管是零基础入门、中级进阶还是冲资深，都能精准适配
• 每天花 5～10 分钟，就能稳步搭建起专业认知框架
👇文末加入「UIUX 学习指南」，每天 5～10 分钟，去学、去拆解。
当你开始坚持，你便不再只是“做设计”，而是用设计的眼光重新看见世界。
