核心：断点由内容决定，而非设备，适配内容舒适呈现，而非盲目对应机型。
一、断点的本质
定义：临界宽度值，跨越后布局 / 样式发生变化，核心是服务用户体验
核心思维：从内容出发 —— 拖动画板，当内容挤压、换行、可读性变差时，即为断点时机
误区：不猜设备、不套固定尺寸，聚焦 “内容是否舒适”
二、主要断点 vs 次要断点
表格
类型作用影响范围数量建议主要断点触发页面级布局转变全局所有页面2-4 个（足够）次要断点仅调整单个组件细节单个 / 少数组件组件内单独定义
补充
主要断点范围（参考）：移动端→平板（560-768px）、平板→桌面（1024-1200px）、宽屏（1440px+）
断点不是越多越好，过多会增加开发 / 维护成本
三、断点的设计意义
每个断点区间 = 一套独立设计决策（列数、导航模式、字号、间距等）
重视中间状态：断点之间任意宽度，布局需保持流畅，避免 “只好看标准尺寸”
断点≠数字，需配套完整视觉规范才有效
四、断点策略落地流程
先梳理内容 / 信息架构，再制定断点（内容复杂度决定断点数量）
与开发共同制定，平衡体验需求与技术实现
文档化：明确断点数值、区间规范、更新流程，确保团队对齐
五、常见误区（避坑）
❌ 直接套用框架默认断点（可参考，需结合内容调整）
❌ 只测试标准尺寸（375px/768px 等），忽略中间宽度
❌ 次要断点混入全局体系，导致规范臃肿
❌ 追求断点数量，忽视弹性布局的作用
❌ 只关注宽度，忽略高度适配（短屏幕关键内容易出首屏）
💡 一句话记住
断点是内容的 “舒适临界点”，不是设备的 “尺寸标签”。
📚下面这份《UIUX 学习指南》，是我花 1 年时间整理，萃取苹果、谷歌等大厂设计智慧搭建而成的：
• 体系完整又系统，从视觉、交互到用研、产品，覆盖 UI/UX 全链路
• 不管是零基础入门、中级进阶还是冲资深，都能精准适配
• 每天花 5～10 分钟，就能稳步搭建起专业认知框架
👇文末加入「UIUX 学习指南」，每天 5～10 分钟，去学、去拆解。
当你开始坚持，你便不再只是“做设计”，而是用设计的眼光重新看见世界。
