响应式翻译

把 Figma 响应式变体（移动/平板/桌面）准确翻译成 Tailwind 断点。

为什么

响应式设计是 figma-to-code 交接丢最多细节处。设计师在 Figma 规 3 断点，开发者实现 2 并猜第三，或在错误像素值应用断点。Tailwind 断点系统（sm:640、md:768、lg:1024）映射特定 Figma 画板，映射错意味着布局在设计师从未测的尺寸坏。有纪律方法是把每断点当独立布局（非仅'更小 padding'）并在确切 Figma 画板宽度测，非任意浏览器尺寸。这防'我笔记本上好看、平板上坏'类 bug。

何时使用

设计有 ≥2 断点时。每屏约 1-2 小时。仅桌面内部工具可跳过。

如何做

1. 显式映射 Figma 画板到 Tailwind 断点
   - 移动（375px）→ base（无前缀）；平板（768px）→ md:；桌面（1440px）→ xl:
   - 在设计系统 README 文档化此映射

2. 移动优先实现：写 base（移动）布局，再加 md: 和 xl: 覆盖
   - <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3">
   - 永不从桌面减——加法更易推理

3. 组件级响应用容器查询
   - 卡片应响应容器宽度非视口
   - @container card：容器 >400px 时 grid-cols-1 → grid-cols-2

4. 在确切 Figma 画板宽度测，非任意尺寸
   - Storybook viewport addon：设 375、768、1024、1440 自定义视口
   - 每断点视觉回归快照

5. 用流式单位处理中间尺寸（414px、1024px）
   - 字号用 clamp() 在断点间平滑缩放
   - 避免硬跳：标题不应从 24px 直跳 48px 中间无

示例

// 移动优先响应卡片网格
export function CardGrid({ cards }: { cards: Card[] }) {
  return (
    <div className="grid grid-cols-1 gap-4 px-4 md:grid-cols-2 md:gap-6 md:px-6 xl:grid-cols-3 xl:px-8">
      {cards.map(c => <Card key={c.id} {...c} />)}
    </div>
  );
}

// 用 clamp 的流式标题（375px 到 1440px 间 24px → 48px 缩放）
export function Hero({ title }: { title: string }) {
  return <h1 className="text-[clamp(1.5rem,4vw,3rem)] font-bold">{title}</h1>;
}

// 匹配 Figma 画板的 Storybook 视口
export const parameters = {
  viewport: { viewports: {
    mobile: { name: "移动", styles: { width: "375px", height: "812px" } },
    tablet: { name: "平板", styles: { width: "768px", height: "1024px" } },
    desktop: { name: "桌面", styles: { width: "1440px", height: "900px" } },
  } },
};

常见问题

⚠从桌面开始用 max-width 缩，在异常尺寸产出坏的移动布局。
⚠用固定像素宽（width: 375px）而非响应式单位，布局完全不适应。
⚠仅测 3 常见尺寸（iPhone、iPad、笔记本）漏 414px Android 宽度坏处。
⚠所有断点用同 padding，移动 32px padding 吃 375px 屏 17%。

最佳实践

✓总移动优先实现——它迫使你先处理最受限布局，那里每像素重要。
✓出现在不同上下文（侧边栏、全宽）的组件用容器查询（Tailwind @container）。
✓CI 里设 Playwright 视觉测试在 5 宽度（375、414、768、1024、1440）截每页。
✓应流式缩放的排版和间距用 clamp()，而非断点跳。