默认的断点：base是默认样式，不带任何媒体查询，适用于所有屏幕。
sm是30em（约480px）
md是48em（768px）
lg是62em（992px）
xl是80em（1280px）
2xl是96em（1536px）
这些值都是基于em单位，但通常会被转换为像素来理解。
在 Chakra UI 中，响应式断点（breakpoints）基于 移动优先（Mobile-First） 的设计原则，默认提供以下 5 个尺寸等级：
默认断点列表
| 断点名称 | 对应 CSS 媒体查询范围 | 像素范围（近似值） | 常见设备场景 |
|---|---|---|---|
base |
无媒体查询（默认值） | < 30em (≈480px) | 超小屏手机（竖屏） |
sm |
@media (min-width: 30em) |
30em - 47.99em (480px-767px) | 小屏手机（横屏） |
md |
@media (min-width: 48em) |
48em - 61.99em (768px-991px) | 平板/小桌面 |
lg |
@media (min-width: 62em) |
62em - 79.99em (992px-1279px) | 标准桌面 |
xl |
@media (min-width: 80em) |
80em - 95.99em (1280px-1535px) | 大桌面/宽屏 |
2xl |
@media (min-width: 96em) |
≥96em (≥1536px) | 超大屏幕/4K 显示器 |
核心规则
1.移动优先：base 表示最小屏幕的默认值，其他断点按需覆盖
2.断点范围：
sm覆盖≥480pxmd覆盖≥768px- 其他同理
3.**自定义断点：**可通过主题配置修改（例如添加3xl）：
// theme.js
export const theme = extendTheme({
breakpoints: {
'3xl': '1600px'
}
})
实用技巧
(1) 范围覆盖示意图
|------base------|-----sm-----|-----md-----|-----lg-----|-----xl-----|-----2xl-----|
<480px 480px 768px 992px 1280px 1536px
(2) 组合用法
// 手机竖屏隐藏，其他情况显示
display={{ base: "none", sm: "block" }}
// 仅在平板和桌面显示
display={{ base: "none", md: "flex" }}
// 超大屏幕特殊处理
display={{ base: "block", xl: "none" }}
(3) 调试工具
- 浏览器开发者工具中切换设备模式，实时查看断点激活状态
- 在控制台输入
window.innerWidth获取当前视口像素值
常见误区
| 错误写法 | 问题 | 正确写法 |
|---|---|---|
display={{ sm: "block" }} |
未定义 base 导致小屏无样式 |
display={{ base: "none", sm: "block" }} |
display="block md:none" |
Chakra 不支持 Tailwind 语法 | 使用对象语法 display={{ base: "block", md: "none" }} |
通过合理使用这些断点，可以轻松实现复杂的响应式布局！