responsive-system

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Responsive System

响应式系统

Agent Workflow (MANDATORY)

Agent工作流（必填）

Before implementation, use

TeamCreate

to spawn 3 agents:

fuse-ai-pilot:explore-codebase - Check existing breakpoints
fuse-ai-pilot:research-expert - Container queries support

After: Run fuse-ai-pilot:sniper for validation.

在实现前，使用

TeamCreate

生成3个Agent：

fuse-ai-pilot:explore-codebase - 检查现有断点
fuse-ai-pilot:research-expert - 容器查询支持情况

完成后：运行fuse-ai-pilot:sniper进行验证。

Overview

概述

Name	Width	Tailwind	Use Case
xs	0-479px	default	Mobile portrait
sm	480-719px	`sm:`	Mobile landscape
md	720-919px	`md:`	Tablet portrait
lg	920-1199px	`lg:`	Tablet landscape
xl	1200px+	`xl:`	Desktop

名称	宽度范围	Tailwind 前缀	使用场景
xs	0-479px	default	手机竖屏
sm	480-719px	`sm:`	手机横屏
md	720-919px	`md:`	平板竖屏
lg	920-1199px	`lg:`	平板横屏
xl	1200px+	`xl:`	桌面端

Quick Reference

快速参考

Mobile-First Pattern

移动优先模式

tsx

<div className="
  grid grid-cols-1      /* mobile: 1 column */
  sm:grid-cols-2        /* sm: 2 columns */
  lg:grid-cols-3        /* lg: 3 columns */
  gap-4 sm:gap-6 lg:gap-8
">

tsx

<div className="
  grid grid-cols-1      /* 移动端：1列 */
  sm:grid-cols-2        /* sm断点：2列 */
  lg:grid-cols-3        /* lg断点：3列 */
  gap-4 sm:gap-6 lg:gap-8
">

Container Queries

容器查询

tsx

<div className="@container">
  <div className="@md:flex @md:gap-4">
    <div className="@md:w-1/2">Left</div>
    <div className="@md:w-1/2">Right</div>
  </div>
</div>

tsx

<div className="@container">
  <div className="@md:flex @md:gap-4">
    <div className="@md:w-1/2">左侧</div>
    <div className="@md:w-1/2">右侧</div>
  </div>
</div>

Fluid Typography

流体排版

css

.hero-title {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

css

.hero-title {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

Hide/Show Pattern

显示/隐藏模式

tsx

<div className="block sm:hidden">Mobile only</div>
<div className="hidden lg:block">Desktop only</div>

tsx

<div className="block sm:hidden">仅移动端显示</div>
<div className="hidden lg:block">仅桌面端显示</div>

Tailwind v4 Config

Tailwind v4 配置

css

@theme {
  --breakpoint-sm: 480px;
  --breakpoint-md: 720px;
  --breakpoint-lg: 920px;
  --breakpoint-xl: 1200px;
}

css

@theme {
  --breakpoint-sm: 480px;
  --breakpoint-md: 720px;
  --breakpoint-lg: 920px;
  --breakpoint-xl: 1200px;
}

Validation Checklist

验证检查清单

[ ] Mobile-first approach (start smallest)
[ ] Container queries for complex layouts
[ ] Fluid typography with clamp()
[ ] Touch targets 44x44px on mobile
[ ] No horizontal scroll on mobile

[ ] 采用移动优先的开发方式（从最小尺寸开始）
[ ] 为复杂布局使用容器查询
[ ] 使用clamp()实现流体排版
[ ] 移动端触摸目标尺寸为44x44px
[ ] 移动端无横向滚动