Breakpoints

断点

响应式断点是一组 min-width 阈值。当视口达到某断点时，对应工具类生效。瑚琏沿用五档，真源位于 preset.css。

实时断点

调整浏览器窗口宽度，下方会高亮当前命中的最大断点。

< sm< smsmsmmdmdlglgxlxl2xl2xl

断点表

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

响应式用法

移动优先：最窄视口使用无前缀基础类，更宽视口用断点前缀覆盖。下方栅格会从一列变为两列再变为四列。

卡片 1

卡片 2

卡片 3

卡片 4

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

真源与定制

五档断点在 preset.css 的 @theme 中声明。修改这里会同时更新全站工具类断点和本页表格。

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