响应式规格#

同一套组件在桌面 / 平板 / 手机下自适应，不另起 mobile-only 库。

断点 Token#

Token	值	用途
--kd-bp-sm	640px	小屏起步
--kd-bp-md	768px	平板 / 移动分界（常用）
--kd-bp-lg	1024px	桌面分栏
--kd-bp-xl	1280px	宽屏容器

触控目标：--kd-touch-min: 44px（Button、Tabs、Menu 等已遵守）。

安全区#

env(safe-area-inset-*) 已作用于：

• .kd-config-root 左右内边距
• AppShell 顶栏
• 底部 Drawer
• Toast 视口偏移

宿主页建议：viewport-fit=cover（如营销落地页）。

组件行为（桌面 vs ≤768px）#

组件	桌面	移动
Grid	cols / mdCols / lgCols 类控制列数	默认更少列；用 md-* / lg-* 递进
Hero	双栏（文案 + media）	单栏堆叠，缩小纵向 padding
AppShell	侧栏 + 主区横向	侧栏改为纵向堆叠全宽；collapsible 可折叠
Drawer	右/左滑入（宽 ≤360px）	同模式，宽度 min(360px, 100%)；底栏含安全区
Menu	纵向列表，触控高度 ≥44px	同结构；常作 Drawer 内容
Form horizontal	标签固定宽	自动改为纵向
Feature	2–4 列	≤768 单列；≤1024 时 4 列收为 2 列

验收#

• Marketing Demo 在窄视口下 Hero / Feature 单列可读
• Admin Demo 侧栏可折叠，表单在窄屏不错位