responsive_design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Responsive Design Standards

前端响应式设计标准

Rule: Mobile-first development with consistent breakpoints, fluid layouts, relative units, and touch-friendly targets.

规则: 采用移动优先开发模式，使用统一断点、流体布局、相对单位和触控友好的交互目标。

When to use this skill

适用场景

When creating or modifying layouts that need to work on mobile, tablet, and desktop
When implementing mobile-first design patterns starting with mobile layout
When writing media queries or breakpoint-specific styles
When using flexible units (rem, em, %) instead of fixed pixels for scalability
When implementing fluid layouts with percentage-based widths or flexbox/grid
When ensuring touch targets meet minimum size requirements (44x44px) for mobile
When optimizing images and assets for different screen sizes and mobile networks
When testing UI across multiple device sizes and breakpoints
When maintaining readable typography across all screen sizes
When prioritizing content display on smaller screens through layout decisions
When using responsive design utilities in CSS frameworks (Tailwind, Bootstrap responsive classes)

This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend responsive.

创建或修改需要适配手机、平板和桌面端的布局时
从移动端布局开始，实现移动优先设计模式时
编写媒体查询或断点专属样式时
使用灵活单位（rem、em、%）替代固定像素以实现可扩展性时
通过百分比宽度或Flexbox/Grid实现流体布局时
确保移动端触控目标满足最小尺寸要求（44x44px）时
针对不同屏幕尺寸和移动网络优化图片及资源时
在多设备尺寸和断点下测试UI时
确保所有屏幕尺寸下排版可读性时
通过布局决策在小屏幕上优先展示核心内容时
在CSS框架中使用响应式设计工具类（Tailwind、Bootstrap响应式类）时

本技能为Claude Code提供了处理前端响应式设计时需遵循的编码标准指导。

Mobile-First Development - Mandatory

移动优先开发 - 强制要求

Always start with mobile layout, then enhance for larger screens.

Bad (desktop-first):

css

.container {
  width: 1200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

Good (mobile-first):

css

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    grid-template-columns: repeat(4, 1fr);
  }
}

Why mobile-first:

Forces content prioritization
Better performance on mobile (no overriding)
Progressive enhancement over graceful degradation

始终从移动端布局开始，再为更大屏幕做增强。

错误示例（桌面优先）:

css

.container {
  width: 1200px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .container {
    width: 100%;
    grid-template-columns: 1fr;
  }
}

正确示例（移动优先）:

css

.container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    grid-template-columns: repeat(4, 1fr);
  }
}

移动优先的优势:

强制优先考虑核心内容
移动端性能更优（无需覆盖样式）
采用渐进增强而非优雅降级的理念

Standard Breakpoints

标准断点

Identify and use project breakpoints consistently:

Common breakpoint systems:

Tailwind:

sm: 640px   (small tablets)
md: 768px   (tablets)
lg: 1024px  (laptops)
xl: 1280px  (desktops)
2xl: 1536px (large desktops)

Bootstrap:

sm: 576px
md: 768px
lg: 992px
xl: 1200px
xxl: 1400px

Check existing codebase for breakpoint definitions before creating new ones.

Usage (Tailwind):

jsx

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

Usage (CSS):

css

@media (min-width: 768px) { }
@media (min-width: 1024px) { }

Never use arbitrary breakpoints like 850px or 1150px unless explicitly required.

统一识别并使用项目指定的断点:

常见断点系统:

Tailwind:

sm: 640px   (小型平板)
md: 768px   (平板)
lg: 1024px  (笔记本)
xl: 1280px  (桌面端)
2xl: 1536px (大尺寸桌面端)

Bootstrap:

sm: 576px
md: 768px
lg: 992px
xl: 1200px
xxl: 1400px

在创建新断点前，先检查现有代码库中的断点定义。

Tailwind使用示例:

jsx

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">

CSS使用示例:

css

@media (min-width: 768px) { }
@media (min-width: 1024px) { }

除非有明确要求，否则不要使用850px或1150px这类任意断点。

Fluid Layouts

流体布局

Use flexible containers that adapt to screen size:

Bad (fixed widths):

css

.container { width: 1200px; }
.sidebar { width: 300px; }
.content { width: 900px; }

Good (fluid):

css

.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 1rem;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 300px 1fr;
  }
}

Patterns for fluid layouts:

Flexbox:
```
flex: 1
```
,
```
flex-grow
```
,
```
flex-shrink
```
Grid:
```
1fr
```
,
```
minmax()
```
,
```
auto-fit
```
,
```
auto-fill
```
Percentage widths:
```
width: 100%
```
,
```
max-width: 1200px
```
Container queries (modern):
```
@container (min-width: 400px)
```

使用可适配屏幕尺寸的灵活容器:

错误示例（固定宽度）:

css

.container { width: 1200px; }
.sidebar { width: 300px; }
.content { width: 900px; }

正确示例（流体布局）:

css

.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 1rem;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 300px 1fr;
  }
}

流体布局模式:

Flexbox:
```
flex: 1
```
,
```
flex-grow
```
,
```
flex-shrink
```
Grid:
```
1fr
```
,
```
minmax()
```
,
```
auto-fit
```
,
```
auto-fill
```
百分比宽度:
```
width: 100%
```
,
```
max-width: 1200px
```
容器查询（现代方案）:
```
@container (min-width: 400px)
```

Relative Units Over Fixed Pixels

相对单位替代固定像素

Use rem/em for scalability and accessibility:

Bad:

css

font-size: 16px;
padding: 20px;
margin: 10px;
border-radius: 8px;

Good:

css

font-size: 1rem;      /* 16px base */
padding: 1.25rem;     /* 20px */
margin: 0.625rem;     /* 10px */
border-radius: 0.5rem; /* 8px */

When to use each unit:

```
rem
```
: Font sizes, spacing, layout dimensions (scales with root font size)
```
em
```
: Component-relative sizing (scales with parent font size)
```
%
```
: Widths, heights relative to parent
```
px
```
: Borders (1px), shadows, very small values
```
vw/vh
```
: Full viewport dimensions, hero sections
```
ch
```
: Text-based widths (e.g.,
```
max-width: 65ch
```
for readable line length)

Framework utilities handle this automatically:

jsx

<div className="text-base p-5 m-2.5 rounded-lg">

使用rem/em实现可扩展性和可访问性:

错误示例:

css

font-size: 16px;
padding: 20px;
margin: 10px;
border-radius: 8px;

正确示例:

css

font-size: 1rem;      /* 基于16px基准 */
padding: 1.25rem;     /* 对应20px */
margin: 0.625rem;     /* 对应10px */
border-radius: 0.5rem; /* 对应8px */

各单位适用场景:

```
rem
```
: 字体大小、间距、布局尺寸（随根字体大小缩放）
```
em
```
: 组件相对尺寸（随父元素字体大小缩放）
```
%
```
: 相对于父元素的宽度、高度
```
px
```
: 边框（1px）、阴影、极小尺寸值
```
vw/vh
```
: 全屏视口尺寸、英雄区
```
ch
```
: 基于文本的宽度（例如
```
max-width: 65ch
```
实现易读的行长度）

框架工具类已自动处理单位转换:

jsx

<div className="text-base p-5 m-2.5 rounded-lg">

Touch-Friendly Design

触控友好设计

Minimum touch target size: 44x44px (iOS) / 48x48px (Android)

Bad:

css

.icon-button {
  width: 24px;
  height: 24px;
}

Good:

css

.icon-button {
  width: 24px;
  height: 24px;
  padding: 12px; /* Total: 48x48px */
  /* Or use min-width/min-height */
  min-width: 44px;
  min-height: 44px;
}

Touch target checklist:

Buttons minimum 44x44px
Links in text have adequate spacing
Form inputs have sufficient height (min 44px)
Icon buttons have padding for larger hit area
Spacing between interactive elements (min 8px)

最小触控目标尺寸: 44x44px（iOS）/ 48x48px（Android）

错误示例:

css

.icon-button {
  width: 24px;
  height: 24px;
}

正确示例:

css

.icon-button {
  width: 24px;
  height: 24px;
  padding: 12px; /* 总尺寸: 48x48px */
  /* 或使用最小宽高 */
  min-width: 44px;
  min-height: 44px;
}

触控目标检查清单:

按钮最小尺寸为44x44px
文本链接有足够的间距
表单输入框高度足够（最小44px）
图标按钮通过内边距扩大点击区域
交互元素间的间距至少为8px

Readable Typography

可读排版

Maintain readable font sizes without zoom:

Bad:

css

body { font-size: 12px; }
.small-text { font-size: 10px; }

Good:

css

body { font-size: 1rem; } /* 16px minimum */
.small-text { font-size: 0.875rem; } /* 14px minimum */

Typography guidelines:

Body text: 16px (1rem) minimum
Small text: 14px (0.875rem) minimum
Line height: 1.5 for body, 1.2 for headings
Line length: 45-75 characters (use
```
max-width: 65ch
```
)
Contrast: WCAG AA minimum (4.5:1 for normal text)

Responsive typography:

css

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3rem;
  }
}

Or with clamp (fluid):

css

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

无需缩放即可保持字体可读性:

错误示例:

css

body { font-size: 12px; }
.small-text { font-size: 10px; }

正确示例:

css

body { font-size: 1rem; } /* 最小16px */
.small-text { font-size: 0.875rem; } /* 最小14px */

排版指南:

正文字体: 最小16px（1rem）
小字体: 最小14px（0.875rem）
行高: 正文1.5，标题1.2
行长度: 45-75个字符（使用
```
max-width: 65ch
```
）
对比度: 符合WCAG AA标准（普通文本4.5:1）

响应式排版示例:

css

h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  h1 {
    font-size: 3rem;
  }
}

或使用clamp实现流体字体:

css

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

Content Priority on Mobile

移动端内容优先级

Show most important content first, hide or collapse secondary content:

Bad:

jsx

<div>
  <Sidebar /> {/* Full sidebar on mobile */}
  <MainContent />
</div>

Good:

jsx

<div className="flex flex-col lg:flex-row">
  <MainContent className="order-1" />
  <Sidebar className="order-2 hidden lg:block" />
</div>

Strategies:

Hide non-essential elements on mobile
Use hamburger menus for navigation
Collapse accordions/tabs for secondary content
Stack layouts vertically on mobile
Use
```
order
```
property to reorder content

优先展示核心内容，隐藏或折叠次要内容:

错误示例:

jsx

<div>
  <Sidebar /> {/* 移动端显示完整侧边栏 */}
  <MainContent />
</div>

正确示例:

jsx

<div className="flex flex-col lg:flex-row">
  <MainContent className="order-1" />
  <Sidebar className="order-2 hidden lg:block" />
</div>

实现策略:

移动端隐藏非必要元素
使用汉堡菜单实现导航
用手风琴/标签页折叠次要内容
移动端采用垂直堆叠布局
使用
```
order
```
属性调整内容顺序

Image Optimization

图片优化

Serve appropriate images for device size:

Bad:

html

<img src="hero-4000x3000.jpg" alt="Hero">

Good:

html

<img
  src="hero-800x600.jpg"
  srcset="
    hero-400x300.jpg 400w,
    hero-800x600.jpg 800w,
    hero-1600x1200.jpg 1600w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Hero"
>

Or with modern formats:

html

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero">
</picture>

Framework-specific:

jsx

// Next.js
<Image
  src="/hero.jpg"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Hero"
/>

为不同设备尺寸提供适配的图片:

错误示例:

html

<img src="hero-4000x3000.jpg" alt="Hero">

正确示例:

html

<img
  src="hero-800x600.jpg"
  srcset="
    hero-400x300.jpg 400w,
    hero-800x600.jpg 800w,
    hero-1600x1200.jpg 1600w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Hero"
>

或使用现代图片格式:

html

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero">
</picture>

框架专属实现（Next.js）:

jsx

// Next.js
<Image
  src="/hero.jpg"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  alt="Hero"
/>

Testing Across Devices

跨设备测试

Common Responsive Patterns

常见响应式模式

Navigation:

jsx

// Mobile: Hamburger menu
// Desktop: Horizontal nav
<nav className="lg:flex lg:items-center">
  <button className="lg:hidden">Menu</button>
  <ul className="hidden lg:flex lg:gap-4">
    <li>Home</li>
    <li>About</li>
  </ul>
</nav>

Grid layouts:

css

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

Sidebar layouts:

css

.layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .layout {
    flex-direction: row;
  }
  .sidebar { width: 300px; }
  .content { flex: 1; }
}

导航模式:

jsx

// 移动端：汉堡菜单
// 桌面端：水平导航
<nav className="lg:flex lg:items-center">
  <button className="lg:hidden">菜单</button>
  <ul className="hidden lg:flex lg:gap-4">
    <li>首页</li>
    <li>关于我们</li>
  </ul>
</nav>

网格布局模式:

css

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

侧边栏布局模式:

css

.layout {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .layout {
    flex-direction: row;
  }
  .sidebar { width: 300px; }
  .content { flex: 1; }
}

Verification Checklist

验证清单

Quick Reference

快速参考

Situation	Action
Starting new layout	Begin with mobile (320-375px)
Need breakpoint	Use project standard (check existing code)
Setting width	Use `width: 100%` + `max-width`
Setting font size	Use `rem` (16px = 1rem)
Setting spacing	Use `rem` or framework utilities
Button too small	Ensure min 44x44px with padding
Text too small	Minimum 16px (1rem) for body
Testing layout	Check 375px, 768px, 1024px, 1440px
Responsive Design v1.1 - Enhanced

场景	操作
开始新布局	从移动端（320-375px）开始
需要使用断点	使用项目标准断点（先检查现有代码）
设置宽度	使用 `width: 100%` + `max-width`
设置字体大小	使用 `rem` （16px = 1rem）
设置间距	使用 `rem` 或框架工具类
按钮尺寸过小	通过内边距确保最小44x44px点击区域
文本尺寸过小	正文字体最小16px（1rem）
测试布局	检查375px、768px、1024px、1440px尺寸
响应式设计 v1.1 - 增强版

🔄 Workflow

🔄 工作流程

Kaynak: Google Web Fundamentals & MDN Responsive Design

来源: Google Web Fundamentals & MDN Responsive Design

Aşama 1: Modern Layout Techniques

步骤1：现代布局技术

Container Queries: Ekran genişliğine (
```
@media
```
) değil, bileşenin bulunduğu alanın genişliğine (
```
@container
```
) göre stil yaz.
CSS Grid & Subgrid: Karmaşık 2D layoutlar için Grid kullan. İç içe hizalama için
```
subgrid
```
kullan.
Fluid Typography: Sabit px/rem yerine
```
clamp(1rem, 5vw, 2rem)
```
ile akışkan yazı tipleri kullan.

容器查询（Container Queries）：不要基于屏幕宽度（
```
@media
```
）编写样式，而是基于组件所在容器的宽度（
```
@container
```
）编写样式。
CSS Grid & Subgrid：使用Grid构建复杂的2D布局，使用
```
subgrid
```
实现嵌套对齐。
流体排版（Fluid Typography）：不使用固定的px/rem，而是通过
```
clamp(1rem, 5vw, 2rem)
```
实现流体字体。

Aşama 2: Interaction & Adaptation

步骤2：交互与适配

Interaction Queries: Sadece ekran boyutu değil, input tipine göre (
```
@media (hover: hover)
```
) stil değiştir (Dokunmatik cihaz optimizasyonu).
Picture Element: Farklı ekranlar için farklı görselleri (
```
<picture>
```
,
```
srcset
```
) sun (Art Direction & Performance).
Dark Mode:
```
prefers-color-scheme
```
ile sistem temasını destekle.

交互查询（Interaction Queries）：不仅基于屏幕尺寸，还根据输入类型（
```
@media (hover: hover)
```
）修改样式（优化触控设备体验）。
Picture元素：通过
```
<picture>
```
、
```
srcset
```
为不同屏幕提供不同图片（优化内容呈现与性能）。
深色模式（Dark Mode）：通过
```
prefers-color-scheme
```
支持系统主题。

Aşama 3: Verification

步骤3：验证

Device Lab: Sadece Chrome DevTools ile değil, gerçek bir iOS ve Android cihazda test et (100vh sorunu vb. için).
Zoom: Sayfa %200 zoom yapıldığında düzenin bozulmadığını ve okunabilir olduğunu doğrula.
Landscape: Mobil cihazı yan çevirince layout'un çalışmaya devam ettiğini kontrol et.

设备实验室（Device Lab）：不要仅使用Chrome DevTools测试，还要在真实的iOS和Android设备上测试（解决100vh等问题）。
缩放测试：验证页面在200%缩放时布局仍正常且内容可读。
横屏测试：检查移动设备横屏时布局是否仍能正常工作。

Kontrol Noktaları

检查要点

Aşama	Doğrulama
1	Yatay kaydırma çubuğu (Horizontal Scroll) oluşuyor mu? (Taşan içerik var mı?).
2	Tıklanabilir alanlar (Touch Targets) en az 44x44px mi?
3	CLS (Cumulative Layout Shift) 0.1'in altında mı? (Yüklenirken zıplama var mı?).

步骤	验证内容
1	是否出现横向滚动条？（是否有内容溢出？）
2	触控目标（Touch Targets）是否至少为44x44px？
3	累积布局偏移（CLS）是否低于0.1？（加载时是否有内容跳动？）