响应式断点
Breakpoints
别名:响应式断点媒体查询断点断点手机和电脑的分界什么时候换布局大屏小屏切换点breakpointmedia query breakpoint
这是什么
断点是布局发生切换的视口宽度临界值：窄于此用一套排版，宽于此换另一套。断点应由内容决定——把窗口慢慢拉宽，哪里开始拥挤、哪里变难看，那里就是断点，而不是照搬 iPhone、iPad 的型号宽度。移动优先用 min-width 从小到大叠加，断点越少越容易维护。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 同一页面在手机和桌面需要不同列数或导航形态
- 需要在某个宽度切换侧栏、字号或间距密度
- 从移动端基线出发、逐级增强的响应式布局
✕ 不适用场景
- 只有一种固定宽度、无需适配的嵌入式控件
- 用设备型号（iPhone 15、iPad Pro）当断点名
- 断点堆到十来个，样式互相打架、难以维护
常见形式
移动优先
Mobile-first
先写窄屏基线，再用 min-width 逐级叠加
内容驱动
Content-driven
把窗口拉宽，哪里挤了哪里就是断点
断点令牌
Breakpoint tokens
断点值集中成变量或配置，避免散落魔法数
实现要点
@media (min-width: 48rem)min-width: 0grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))container-type: inline-sizepadding-inline: clamp(1rem, 4vw, 2.5rem)先写窄屏样式作为基线，再用 @media (min-width: ...) 逐级覆盖，避免 desktop-first 的 max-width 降级写法。断点值用 em/rem（48rem＝768px）而不是 px，用户放大字号时仍按内容切换；断点集中定义成 CSS 变量或 Tailwind screens，组件内不散写魔法数。能靠 flex-wrap、grid auto-fit、clamp() 自适应的地方就别加断点。
平台 API
@mediamin-widthcontainer-typeclamp()代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| CSS | @media (min-width: 48rem) 移动优先的最小宽度媒体查询 |
| Tailwind CSS | sm: / md: / lg: 前缀即 min-width 断点 |
| CSS Container Queries | @container (min-width: 30rem) 按组件容器宽度而非视口切换 |
相关概念
用一组按比例递增的字号定义标题与正文层级，让排版有稳定节奏。以正文基准字号乘以固定比例（如 1.25 大三度、1.333 纯四度）逐级放大，标题之间形成可预期的视觉落差，不必逐档拍脑袋定 px；也可用 sm/md/lg 尺码或 clamp() 流式档位落地。
基础相似概念触控目标是手指能点中的可交互范围，不等于图标看起来多大。苹果 HIG 建议至少 44×44 CSS 像素，Material 建议 48dp；相邻目标之间还要留约 8px 间距，避免误触。视觉小图标可以用透明内边距或伪元素把热区撑大，而不用改变外观。
基础相似概念固定在页面顶部的水平导航条：左侧品牌标识，中间主导航链接，右侧搜索、 入口按钮与用户头像。它是网站的"门面导航"，把最重要的三到七个入口压进 一条横向空间，移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
组件搭配使用固定在页面一侧（通常左侧）的垂直导航区，承载产品的主要层级入口。 后台管理系统的事实标准：顶部放品牌与全局搜索，侧边栏放模块树，内容区专注任务。
组件搭配使用