断点

Breakpoint

样式与 CSS也叫：响应式断点、屏幕断点、Breakpoints

一句话：响应式布局里切换样式的屏幕宽度临界值，比如宽度小于 768px 时从两栏变成一栏。

详细解释

断点就是「屏幕宽到多少，布局要变」的那几个数字。常见的一组是 640px（大手机）、768px（平板）、1024px（小笔记本）、1280px（桌面）。Tailwind 里对应 sm、md、lg、xl，写 md:grid-cols-2 表示「768px 及以上显示两列」。

断点是数值，媒体查询 是用这些数值写条件的 CSS 语法，响应式 是最终目标。跟 AI 说「md 断点以下变成一列」或「宽度小于 768px 时变成一列」都很明确，比「手机上好看点」有效得多。

选断点更好的思路是看内容：把浏览器窗口慢慢拖窄，哪里开始挤就在哪里切换。一个项目的断点要统一，不要每个组件各用一套。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

请统一使用 Tailwind 默认断点：小于 768px（md 以下）时隐藏侧边栏，改为顶部汉堡菜单，表格改成卡片列表；768px 到 1024px 之间侧边栏收窄成只显示图标；1024px 及以上显示完整侧边栏。