responsive-styling

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Responsive Styling Skill

响应式样式技能

Purpose

目标

Generate mobile-first, responsive CSS/SCSS that works across all devices and follows accessibility best practices.

生成适配所有设备且遵循无障碍最佳实践的移动端优先响应式CSS/SCSS。

Philosophy

理念

Responsive design is accessibility. Mobile-first is user-first.

响应式设计即无障碍设计。移动端优先即用户优先。

Core Beliefs

核心信念

Mobile First is Performance First: Start with constraints, enhance progressively
Accessibility is Non-Negotiable: WCAG AA compliance is the baseline, not a bonus
Exact Specifications Build Confidence: Calculate exact contrast ratios, don't estimate
Touch-Friendly by Default: 44px minimum targets prevent user frustration

移动端优先即性能优先：从约束条件入手，逐步增强功能
无障碍设计是硬性要求：WCAG AA合规是基准，而非额外福利
精确规范建立信任：计算精确的对比度，绝不估算
默认支持触摸友好：44px最小目标尺寸避免用户操作受挫

Why Mobile-First Responsive Styling Matters

为什么移动端优先响应式样式至关重要

User Experience: Most users access sites on mobile devices
Performance: Smaller initial payload, enhance for larger screens
Accessibility: Ensures usability for all users and devices
Professional Quality: Shows attention to detail and best practices

用户体验：大多数用户通过移动设备访问网站
性能：初始负载更小，针对大屏逐步增强
无障碍：确保所有用户和设备都能正常使用
专业品质：体现对细节和最佳实践的重视

When This Skill Activates

技能触发场景

This skill automatically activates when:

User asks to "make it responsive"
User mentions breakpoints, mobile, tablet, or desktop
Creating styles for a component
User asks about media queries
Responsive design is needed for implementation
WordPress block patterns need editor styling

当出现以下情况时，本技能自动激活：

用户要求“实现响应式效果”
用户提及断点、移动端、平板或桌面端
为组件创建样式时
用户询问媒体查询相关问题
实现过程中需要响应式设计
WordPress区块模式需要编辑器样式

Decision Framework

决策框架

Before generating responsive styles, determine:

在生成响应式样式前，需确定以下内容：

What's the Component Type?

组件类型是什么？

Layout container → Focus on width, padding, grid/flex
Content block → Focus on typography, spacing, images
Interactive element (button, form) → Focus on touch targets, states, transitions
Navigation → Focus on mobile menu, breakpoint behavior
Media (images, video) → Focus on aspect ratios, object-fit

布局容器 → 重点关注宽度、内边距、网格/弹性布局
内容区块 → 重点关注排版、间距、图片
交互元素（按钮、表单）→ 重点关注触摸目标、状态、过渡效果
导航栏 → 重点关注移动端菜单、断点行为
媒体元素（图片、视频）→ 重点关注宽高比、对象适配

What Are the Breakpoints?

断点设置是什么？

Standard mobile-first breakpoints:

Base styles (320px+) - Mobile default
Tablet (768px+) -
```
@media (min-width: 768px)
```
Desktop (1024px+) -
```
@media (min-width: 1024px)
```
Large desktop (1440px+) - Optional for max-width constraints

When to add breakpoints:

✅ Layout changes significantly (columns stack/unstack)
✅ Typography scales (mobile 16px → desktop 18px)
✅ Touch targets adjust (mobile 44px → desktop 40px)
❌ Minor pixel adjustments (avoid breakpoint bloat)

标准移动端优先断点：

基础样式（320px+）- 移动端默认
平板（768px+）-
```
@media (min-width: 768px)
```
桌面端（1024px+）-
```
@media (min-width: 1024px)
```
大屏桌面端（1440px+）- 可选，用于最大宽度限制

何时添加断点：

✅ 布局发生显著变化（从堆叠变为列布局）
✅ 排版需要缩放（移动端16px → 桌面端18px）
✅ 触摸目标需要调整（移动端44px → 桌面端40px）
❌ 仅需微小像素调整（避免断点冗余）

What Accessibility Requirements?

无障碍要求有哪些？

WCAG 2.1 Level AA compliance:

✅ Color contrast: 4.5:1 for normal text, 3:1 for large text (calculate exactly)
✅ Touch targets: ≥ 44x44px on mobile, ≥ 40x40px on desktop
✅ Focus indicators: 2px outline minimum, distinct from hover
✅ Motion sensitivity:
```
@media (prefers-reduced-motion: reduce)
```

WCAG 2.1 AA级合规要求：

✅ 色彩对比度：普通文本4.5:1，大文本3:1（精确计算）
✅ 触摸目标：移动端≥44x44px，桌面端≥40x40px
✅ 焦点指示器：最小2px轮廓，与悬停状态区分开
✅ 动画敏感度：
```
@media (prefers-reduced-motion: reduce)
```

What States Are Needed?

需要哪些状态？

Interactive states (buttons, links):

```
:hover
```
- Mouse pointer over element
```
:focus
```
- Keyboard navigation focus
```
:focus-visible
```
- Keyboard focus (not mouse click)
```
:active
```
- During click/tap
```
:disabled
```
- Inactive state

Priority: Focus states more important than hover (accessibility)

交互状态（按钮、链接）：

```
:hover
```
- 鼠标指针悬停在元素上
```
:focus
```
- 键盘导航焦点
```
:focus-visible
```
- 键盘焦点（非鼠标点击触发）
```
:active
```
- 点击/触摸过程中
```
:disabled
```
- 未激活状态

优先级：焦点状态比悬停状态更重要（无障碍需求）

What Typography Scale?

排版缩放规则是什么？

Mobile-first sizing:

Body text: Start 16px (never below, readability)

Headings: Use

clamp()

for fluid scaling

Example:
```
font-size: clamp(1.5rem, 5vw, 2.5rem);
```

Line height: 1.5 for body, 1.2-1.3 for headings
Font weights: Use actual weights, not relative (400, 600, 700)

移动端优先尺寸设置：

正文：从16px开始（绝不小于该值，保证可读性）

标题：使用

clamp()

实现流畅缩放示例：

font-size: clamp(1.5rem, 5vw, 2.5rem);

行高：正文1.5，标题1.2-1.3
字体粗细：使用具体数值，而非相对值（400、600、700）

What Spacing System?

间距系统是什么？

Consistent spacing scale (choose one):

8px grid: 8px, 16px, 24px, 32px, 40px, 48px, 64px
rem-based: 0.5rem, 1rem, 1.5rem, 2rem, 3rem, 4rem

Apply consistently:

Margins, padding, gaps use same scale
Avoid arbitrary values (17px, 23px)

统一间距比例（二选一）：

8px网格：8px、16px、24px、32px、40px、48px、64px
rem基准：0.5rem、1rem、1.5rem、2rem、3rem、4rem

统一应用：

外边距、内边距、间隙使用同一比例
避免任意数值（如17px、23px）

Decision Tree

决策树

User requests responsive styles
    ↓
Determine component type
    ↓
Define mobile-first base styles (320px+)
    ↓
Calculate contrast ratios (WCAG AA)
    ↓
Add tablet breakpoint (768px+) if layout changes
    ↓
Add desktop breakpoint (1024px+) if needed
    ↓
Add all interactive states (focus > hover)
    ↓
Add reduced motion support
    ↓
Output mobile-first SCSS with exact values

User requests responsive styles
    ↓
Determine component type
    ↓
Define mobile-first base styles (320px+)
    ↓
Calculate contrast ratios (WCAG AA)
    ↓
Add tablet breakpoint (768px+) if layout changes
    ↓
Add desktop breakpoint (1024px+) if needed
    ↓
Add all interactive states (focus > hover)
    ↓
Add reduced motion support
    ↓
Output mobile-first SCSS with exact values

Core Principles

核心原则

1. Mobile-First Approach

1. 移动端优先方法

Always write base styles for mobile, then enhance for larger screens:

scss

// ✅ CORRECT: Mobile-first
.component {
  font-size: 1rem;        // Base mobile style
  padding: 1rem;

  @media (min-width: 768px) {
    font-size: 1.125rem;  // Enhance for tablet
    padding: 2rem;
  }

  @media (min-width: 1024px) {
    font-size: 1.25rem;   // Enhance for desktop
    padding: 3rem;
  }
}

// ❌ WRONG: Desktop-first
.component {
  font-size: 1.25rem;

  @media (max-width: 1024px) {
    font-size: 1.125rem;
  }

  @media (max-width: 768px) {
    font-size: 1rem;
  }
}

始终先编写移动端的基础样式，再针对更大屏幕进行增强：

scss

// ✅ CORRECT: Mobile-first
.component {
  font-size: 1rem;        // Base mobile style
  padding: 1rem;

  @media (min-width: 768px) {
    font-size: 1.125rem;  // Enhance for tablet
    padding: 2rem;
  }

  @media (min-width: 1024px) {
    font-size: 1.25rem;   // Enhance for desktop
    padding: 3rem;
  }
}

// ❌ WRONG: Desktop-first
.component {
  font-size: 1.25rem;

  @media (max-width: 1024px) {
    font-size: 1.125rem;
  }

  @media (max-width: 768px) {
    font-size: 1rem;
  }
}

2. Standard Breakpoints

2. 标准断点

Use consistent breakpoints:

scss

// Mobile: 320px - 767px (base styles, no media query)
// Tablet: 768px - 1023px
$breakpoint-tablet: 768px;

// Desktop: 1024px+
$breakpoint-desktop: 1024px;

// Optional additional breakpoints
$breakpoint-mobile-large: 480px;
$breakpoint-tablet-large: 960px;
$breakpoint-desktop-large: 1280px;

使用统一的断点：

scss

// Mobile: 320px - 767px (base styles, no media query)
// Tablet: 768px - 1023px
$breakpoint-tablet: 768px;

// Desktop: 1024px+
$breakpoint-desktop: 1024px;

// Optional additional breakpoints
$breakpoint-mobile-large: 480px;
$breakpoint-tablet-large: 960px;
$breakpoint-desktop-large: 1280px;

3. Responsive Typography

3. 响应式排版

Scale typography appropriately:

scss

.heading-1 {
  // Mobile base
  font-size: 2rem;        // 32px
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1rem;

  // Tablet
  @media (min-width: 768px) {
    font-size: 2.5rem;    // 40px
    margin-bottom: 1.5rem;
  }

  // Desktop
  @media (min-width: 1024px) {
    font-size: 3rem;      // 48px
    margin-bottom: 2rem;
  }
}

.body-text {
  // Mobile base
  font-size: 1rem;        // 16px
  line-height: 1.6;

  // Tablet
  @media (min-width: 768px) {
    font-size: 1.125rem;  // 18px
    line-height: 1.7;
  }

  // Desktop
  @media (min-width: 1024px) {
    font-size: 1.25rem;   // 20px
    line-height: 1.8;
  }
}

合理缩放排版：

scss

.heading-1 {
  // Mobile base
  font-size: 2rem;        // 32px
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1rem;

  // Tablet
  @media (min-width: 768px) {
    font-size: 2.5rem;    // 40px
    margin-bottom: 1.5rem;
  }

  // Desktop
  @media (min-width: 1024px) {
    font-size: 3rem;      // 48px
    margin-bottom: 2rem;
  }
}

.body-text {
  // Mobile base
  font-size: 1rem;        // 16px
  line-height: 1.6;

  // Tablet
  @media (min-width: 768px) {
    font-size: 1.125rem;  // 18px
    line-height: 1.7;
  }

  // Desktop
  @media (min-width: 1024px) {
    font-size: 1.25rem;   // 20px
    line-height: 1.8;
  }
}

4. Responsive Spacing

4. 响应式间距

Use fluid spacing that scales:

scss

// Method 1: Stepped spacing
.section {
  // Mobile
  padding: 2rem 1rem;
  margin-bottom: 2rem;

  // Tablet
  @media (min-width: 768px) {
    padding: 3rem 2rem;
    margin-bottom: 3rem;
  }

  // Desktop
  @media (min-width: 1024px) {
    padding: 4rem 3rem;
    margin-bottom: 4rem;
  }
}

// Method 2: Fluid spacing with clamp
.section-fluid {
  // Scales smoothly between mobile and desktop
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

使用可缩放的流畅间距：

scss

// Method 1: Stepped spacing
.section {
  // Mobile
  padding: 2rem 1rem;
  margin-bottom: 2rem;

  // Tablet
  @media (min-width: 768px) {
    padding: 3rem 2rem;
    margin-bottom: 3rem;
  }

  // Desktop
  @media (min-width: 1024px) {
    padding: 4rem 3rem;
    margin-bottom: 4rem;
  }
}

// Method 2: Fluid spacing with clamp
.section-fluid {
  // Scales smoothly between mobile and desktop
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

5. Responsive Layouts

5. 响应式布局

Stacked to Columns

从堆叠到列布局

scss

.card-grid {
  display: grid;
  gap: 1.5rem;

  // Mobile: single column
  grid-template-columns: 1fr;

  // Tablet: 2 columns
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  // Desktop: 3 columns
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

scss

.card-grid {
  display: grid;
  gap: 1.5rem;

  // Mobile: single column
  grid-template-columns: 1fr;

  // Tablet: 2 columns
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  // Desktop: 3 columns
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

Flexbox Responsive

弹性布局响应式

scss

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  // Mobile: stack vertically
  flex-direction: column;

  // Tablet and up: horizontal
  @media (min-width: 768px) {
    flex-direction: row;
    gap: 2rem;
  }

  .flex-item {
    // Mobile: full width
    flex: 1 1 100%;

    // Tablet: 2 items per row
    @media (min-width: 768px) {
      flex: 1 1 calc(50% - 1rem);
    }

    // Desktop: 3 items per row
    @media (min-width: 1024px) {
      flex: 1 1 calc(33.333% - 1.333rem);
    }
  }
}

scss

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  // Mobile: stack vertically
  flex-direction: column;

  // Tablet and up: horizontal
  @media (min-width: 768px) {
    flex-direction: row;
    gap: 2rem;
  }

  .flex-item {
    // Mobile: full width
    flex: 1 1 100%;

    // Tablet: 2 items per row
    @media (min-width: 768px) {
      flex: 1 1 calc(50% - 1rem);
    }

    // Desktop: 3 items per row
    @media (min-width: 1024px) {
      flex: 1 1 calc(33.333% - 1.333rem);
    }
  }
}

WordPress-Specific Patterns

WordPress专属模式

Full-Width Sections

全屏区块

scss

// Handle WordPress core padding
.wp-block-cover {
  // Full viewport width accounting for theme padding
  width: calc(100vw - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right));
  max-width: none;

  // Center it
  margin-left: calc(-1 * var(--wp--style--root--padding-left));
  margin-right: calc(-1 * var(--wp--style--root--padding-right));
}

scss

// Handle WordPress core padding
.wp-block-cover {
  // Full viewport width accounting for theme padding
  width: calc(100vw - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right));
  max-width: none;

  // Center it
  margin-left: calc(-1 * var(--wp--style--root--padding-left));
  margin-right: calc(-1 * var(--wp--style--root--padding-right));
}

Responsive Block Patterns

响应式区块模式

scss

// Pattern wrapper
.wp-block-group.pattern-name {
  // Mobile
  padding: 2rem 1rem;

  // Inner content container
  .wp-block-group__inner-container {
    max-width: 100%;
    margin: 0 auto;

    // Tablet
    @media (min-width: 768px) {
      max-width: 750px;
    }

    // Desktop
    @media (min-width: 1024px) {
      max-width: 1200px;
    }
  }
}

scss

// Pattern wrapper
.wp-block-group.pattern-name {
  // Mobile
  padding: 2rem 1rem;

  // Inner content container
  .wp-block-group__inner-container {
    max-width: 100%;
    margin: 0 auto;

    // Tablet
    @media (min-width: 768px) {
      max-width: 750px;
    }

    // Desktop
    @media (min-width: 1024px) {
      max-width: 1200px;
    }
  }
}

Drupal-Specific Patterns

Drupal专属模式

Paragraph Responsive Styles

段落响应式样式

scss

.paragraph--type--name {
  // Mobile base
  padding: 2rem 1rem;

  // Inner container
  .paragraph__content {
    max-width: 100%;
    margin: 0 auto;

    @media (min-width: 768px) {
      padding: 3rem 2rem;
      max-width: 750px;
    }

    @media (min-width: 1024px) {
      padding: 4rem 3rem;
      max-width: 1200px;
    }
  }
}

scss

.paragraph--type--name {
  // Mobile base
  padding: 2rem 1rem;

  // Inner container
  .paragraph__content {
    max-width: 100%;
    margin: 0 auto;

    @media (min-width: 768px) {
      padding: 3rem 2rem;
      max-width: 750px;
    }

    @media (min-width: 1024px) {
      padding: 4rem 3rem;
      max-width: 1200px;
    }
  }
}

Field Responsive Display

字段响应式显示

scss

.field--name-field-items {
  display: grid;
  gap: 1rem;

  // Mobile: stack
  grid-template-columns: 1fr;

  // Tablet: 2 up
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  // Desktop: 3 up
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

scss

.field--name-field-items {
  display: grid;
  gap: 1rem;

  // Mobile: stack
  grid-template-columns: 1fr;

  // Tablet: 2 up
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  // Desktop: 3 up
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

WordPress Block Editor Styles

WordPress区块编辑器样式

IMPORTANT: WordPress block patterns require TWO separate stylesheets:

重要提示：WordPress区块模式需要两个独立的样式表：

1. Front-End Stylesheet

1. 前端样式表

Standard styles that apply to published pages. No special wrapper needed.

应用于已发布页面的标准样式，无需特殊包裹。

2. Editor Stylesheet

2. 编辑器样式表

Styles for the WordPress block editor (admin). Must wrap all selectors with

.editor-styles-wrapper

Example:

Front-end (

_hero-cta.scss

scss

.hero-cta-pattern {
  padding: 2rem 1rem;
  background: #0073aa;
  color: #ffffff;

  @media (min-width: 768px) {
    padding: 3rem 2rem;
  }
}

Editor (

_hero-cta-editor.scss

scss

// Wrap everything with .editor-styles-wrapper
.editor-styles-wrapper {
  .hero-cta-pattern {
    padding: 2rem 1rem;
    background: #0073aa;
    color: #ffffff;

    @media (min-width: 768px) {
      padding: 3rem 2rem;
    }
  }
}

Why this is necessary:

WordPress block editor uses
```
.editor-styles-wrapper
```
as a scoping mechanism
Without this wrapper, styles won't apply in the admin editor
Pattern appears unstyled when inserted, confusing users

用于WordPress区块编辑器（后台）的样式，必须用

.editor-styles-wrapper

包裹所有选择器。

示例：

前端（

_hero-cta.scss

）：

scss

.hero-cta-pattern {
  padding: 2rem 1rem;
  background: #0073aa;
  color: #ffffff;

  @media (min-width: 768px) {
    padding: 3rem 2rem;
  }
}

编辑器（

_hero-cta-editor.scss

）：

scss

// Wrap everything with .editor-styles-wrapper
.editor-styles-wrapper {
  .hero-cta-pattern {
    padding: 2rem 1rem;
    background: #0073aa;
    color: #ffffff;

    @media (min-width: 768px) {
      padding: 3rem 2rem;
    }
  }
}

必要性说明：

WordPress区块编辑器使用
```
.editor-styles-wrapper
```
作为作用域机制
没有该包裹层，样式将无法在后台编辑器中生效
插入的模式会显示为无样式状态，造成用户困惑

Responsive Images

响应式图片

Basic Responsive Image

基础响应式图片

scss

img {
  max-width: 100%;
  height: auto;
  display: block;
}

scss

img {
  max-width: 100%;
  height: auto;
  display: block;
}

Responsive Background Images

响应式背景图片

scss

.hero-background {
  background-size: cover;
  background-position: center;
  min-height: 300px;

  @media (min-width: 768px) {
    min-height: 400px;
  }

  @media (min-width: 1024px) {
    min-height: 600px;
  }
}

scss

.hero-background {
  background-size: cover;
  background-position: center;
  min-height: 300px;

  @media (min-width: 768px) {
    min-height: 400px;
  }

  @media (min-width: 1024px) {
    min-height: 600px;
  }
}

Art Direction

艺术方向适配

scss

.responsive-image {
  // Mobile: portrait crop
  aspect-ratio: 4/5;
  object-fit: cover;

  // Tablet: square
  @media (min-width: 768px) {
    aspect-ratio: 1/1;
  }

  // Desktop: landscape
  @media (min-width: 1024px) {
    aspect-ratio: 16/9;
  }
}

scss

.responsive-image {
  // Mobile: portrait crop
  aspect-ratio: 4/5;
  object-fit: cover;

  // Tablet: square
  @media (min-width: 768px) {
    aspect-ratio: 1/1;
  }

  // Desktop: landscape
  @media (min-width: 1024px) {
    aspect-ratio: 16/9;
  }
}

Touch-Friendly Design

触摸友好设计

Minimum Touch Targets

最小触摸目标

scss

button,
a,
input,
select {
  // Minimum 44x44px for touch
  min-height: 44px;
  min-width: 44px;

  // Larger on very small screens
  @media (max-width: 375px) {
    min-height: 48px;
    min-width: 48px;
  }
}

scss

button,
a,
input,
select {
  // Minimum 44x44px for touch
  min-height: 44px;
  min-width: 44px;

  // Larger on very small screens
  @media (max-width: 375px) {
    min-height: 48px;
    min-width: 48px;
  }
}

Spacing for Touch

触摸间距

scss

.touch-menu {
  li {
    // More spacing on mobile
    margin-bottom: 0.5rem;

    a {
      // Larger tap area
      padding: 0.75rem 1rem;
      display: block;
    }
  }

  // Less spacing needed on desktop with mouse
  @media (min-width: 1024px) {
    li {
      margin-bottom: 0.25rem;

      a {
        padding: 0.5rem 1rem;
      }
    }
  }
}

scss

.touch-menu {
  li {
    // More spacing on mobile
    margin-bottom: 0.5rem;

    a {
      // Larger tap area
      padding: 0.75rem 1rem;
      display: block;
    }
  }

  // Less spacing needed on desktop with mouse
  @media (min-width: 1024px) {
    li {
      margin-bottom: 0.25rem;

      a {
        padding: 0.5rem 1rem;
      }
    }
  }
}

Accessibility in Responsive Design

响应式设计中的无障碍

Focus Indicators

焦点指示器

scss

a, button, input, select {
  &:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  // More prominent on mobile
  @media (max-width: 767px) {
    &:focus {
      outline-width: 3px;
    }
  }
}

scss

a, button, input, select {
  &:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  // More prominent on mobile
  @media (max-width: 767px) {
    &:focus {
      outline-width: 3px;
    }
  }
}

Text Readability

文本可读性

scss

.content {
  // Mobile: shorter line length
  max-width: 100%;

  // Desktop: optimal reading width
  @media (min-width: 768px) {
    max-width: 65ch; // ~65 characters per line
  }
}

scss

.content {
  // Mobile: shorter line length
  max-width: 100%;

  // Desktop: optimal reading width
  @media (min-width: 768px) {
    max-width: 65ch; // ~65 characters per line
  }
}

Reduced Motion

减少动画

scss

// Respect user's motion preferences
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

scss

// Respect user's motion preferences
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Common Responsive Patterns

常见响应式模式

Hide/Show Elements

显示/隐藏元素

scss

// Show only on mobile
.mobile-only {
  display: block;

  @media (min-width: 768px) {
    display: none;
  }
}

// Hide on mobile
.desktop-only {
  display: none;

  @media (min-width: 768px) {
    display: block;
  }
}

// Tablet and up
.tablet-up {
  display: none;

  @media (min-width: 768px) {
    display: block;
  }
}

scss

// Show only on mobile
.mobile-only {
  display: block;

  @media (min-width: 768px) {
    display: none;
  }
}

// Hide on mobile
.desktop-only {
  display: none;

  @media (min-width: 768px) {
    display: block;
  }
}

// Tablet and up
.tablet-up {
  display: none;

  @media (min-width: 768px) {
    display: block;
  }
}

Responsive Navigation

响应式导航

scss

.main-nav {
  // Mobile: hamburger menu
  @media (max-width: 767px) {
    .menu-toggle {
      display: block;
    }

    .menu-items {
      display: none;

      &.is-open {
        display: block;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
      }
    }
  }

  // Desktop: horizontal menu
  @media (min-width: 768px) {
    .menu-toggle {
      display: none;
    }

    .menu-items {
      display: flex;
      gap: 2rem;
    }
  }
}

scss

.main-nav {
  // Mobile: hamburger menu
  @media (max-width: 767px) {
    .menu-toggle {
      display: block;
    }

    .menu-items {
      display: none;

      &.is-open {
        display: block;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: white;
        padding: 1rem;
      }
    }
  }

  // Desktop: horizontal menu
  @media (min-width: 768px) {
    .menu-toggle {
      display: none;
    }

    .menu-items {
      display: flex;
      gap: 2rem;
    }
  }
}

Responsive Typography System

响应式排版系统

scss

// Define fluid typography
:root {
  // Scales from 16px to 20px
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);

  // Scales from 32px to 48px
  --font-size-h1: clamp(2rem, 1.5rem + 2vw, 3rem);

  // Scales from 24px to 32px
  --font-size-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);

  // Scales from 20px to 24px
  --font-size-h3: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
}

body {
  font-size: var(--font-size-base);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

scss

// Define fluid typography
:root {
  // Scales from 16px to 20px
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);

  // Scales from 32px to 48px
  --font-size-h1: clamp(2rem, 1.5rem + 2vw, 3rem);

  // Scales from 24px to 32px
  --font-size-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);

  // Scales from 20px to 24px
  --font-size-h3: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
}

body {
  font-size: var(--font-size-base);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

Testing Checklist

测试清单

Output Format

输出格式

When generating responsive styles, provide:

scss

/* Component Name */

/* Mobile base styles (320px - 767px) */
.component {
  /* All base styles here */
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) {
  .component {
    /* Tablet enhancements */
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .component {
    /* Desktop enhancements */
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  /* Reduced motion styles */
}

生成响应式样式时，请遵循以下格式：

scss

/* Component Name */

/* Mobile base styles (320px - 767px) */
.component {
  /* All base styles here */
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) {
  .component {
    /* Tablet enhancements */
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .component {
    /* Desktop enhancements */
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  /* Reduced motion styles */
}

Common Mistakes to Avoid

需避免的常见错误

❌ Desktop-first (using max-width) ❌ Magic numbers (random breakpoints) ❌ Forgetting touch targets ❌ Fixed pixel widths that don't scale ❌ Tiny text on mobile (<16px) ❌ Horizontal scrolling ❌ Ignoring landscape mobile ❌ Breaking at intermediate sizes

✅ Mobile-first (using min-width) ✅ Consistent breakpoints ✅ 44px minimum touch targets ✅ Flexible widths with max-width ✅ 16px minimum text ✅ Contained content ✅ Test at 320px, 768px, 1024px ✅ Test at all widths

❌ 桌面端优先（使用max-width） ❌ 魔法数字（随机断点） ❌ 忘记触摸目标 ❌ 固定像素宽度无法缩放 ❌ 移动端文本过小（<16px） ❌ 横向滚动 ❌ 忽略移动端横屏模式 ❌ 中间宽度下布局错乱

✅ 移动端优先（使用min-width） ✅ 统一断点 ✅ 44px最小触摸目标 ✅ 弹性宽度搭配max-width ✅ 16px最小文本 ✅ 内容居中约束 ✅ 在320px、768px、1024px下测试 ✅ 在所有宽度下测试