Breakpoints

断点

响应式断点是一组 min-width 阈值：当视口宽度 ≥ 某断点时，对应的 sm: / md: … 工具类生效。瑚琏沿用 5 档，真源在 preset.css。

实时断点

缩放浏览器窗口，下方高亮当前命中的最大断点。

< sm< smsmsmmdmdlglgxlxl2xl2xl

断点表

前缀	≥ 宽度	rem	典型设备
`sm:`	640px	40rem	横屏手机
`md:`	768px	48rem	竖屏平板
`lg:`	1024px	64rem	横屏平板 / 小笔记本
`xl:`	1280px	80rem	桌面
`2xl:`	1536px	96rem	大桌面

响应式用法

移动优先：基础类无前缀（最窄），更宽屏用前缀覆盖。下方栅格随窗口由 1 → 2 → 4 列。

卡片 1

卡片 2

卡片 3

卡片 4

<div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">

真源与定制

5 档断点在 @hulianui/tokens/preset.css 的 @theme 块里声明为 --breakpoint-sm…2xl。改这里即同时改全站工具类断点 + 本页表格——单一真源。

@theme {
  --breakpoint-sm: 40rem;  /* 640px */
  --breakpoint-md: 48rem;  /* 768px */
  --breakpoint-lg: 64rem;  /* 1024px */
  --breakpoint-xl: 80rem;  /* 1280px */
  --breakpoint-2xl: 96rem; /* 1536px */
}