响应式设计

技能文档

---
name: responsive-design
title: 响应式设计
category: 开发工具
description: 使用容器查询、流体排版、CSS Grid 和移动优先策略实现现代响应式布局。当用户需要构建自适应界面、流体布局或组件级响应式行为时触发。触发词：响应式、自适应布局、CSS Grid。
---

# 响应式设计

掌握现代响应式设计技术，创建能在所有屏幕尺寸和设备环境下无缝适配的界面。

## 使用场景

- 实施移动优先的响应式布局
- 使用容器查询实现组件级响应式
- 创建流体字号和间距缩放系统
- 使用 CSS Grid 和 Flexbox 构建复杂布局
- 设计设计系统的断点策略
- 实施响应式图像和媒体
- 创建自适应导航模式
- 构建响应式表格和数据展示

## 核心能力

### 1. 容器查询

- 独立于视口的组件级响应式
- 容器查询单位（cqi, cqw, cqh）
- 条件样式的风格查询
- 浏览器兼容性降级方案

### 2. 流体排版与间距

- CSS clamp() 实现流体缩放
- 视口相对单位（vw, vh, dvh）
- 带最小/最大值限制的流体字号缩放
- 响应式间距系统

### 3. 布局模式

- CSS Grid 用于二维布局
- Flexbox 用于一维分布
- 内在布局（基于内容的尺寸调整）
- Subgrid 用于嵌套网格对齐

### 4. 断点策略

- 移动优先媒体查询
- 基于内容的断点设置
- 设计令牌集成
- 特性查询（@supports）

## 快速参考

### 现代断点缩放

```css
/* 移动优先断点 */
/* 基础：移动端（< 640px） */
@media (min-width: 640px) {
  /* sm: 大屏手机、小平板 */
}
@media (min-width: 768px) {
  /* md: 平板 */
}
@media (min-width: 1024px) {
  /* lg: 笔记本、小桌面 */
}
@media (min-width: 1280px) {
  /* xl: 桌面 */
}
@media (min-width: 1536px) {
  /* 2xl: 大桌面 */
}

/* Tailwind CSS 等价写法 */
/* sm:  @media (min-width: 640px) */
/* md:  @media (min-width: 768px) */
/* lg:  @media (min-width: 1024px) */
/* xl:  @media (min-width: 1280px) */
/* 2xl: @media (min-width: 1536px) */
```

## 关键模式

### 模式 1：容器查询

使组件根据自身容器尺寸而非视口尺寸进行响应式调整。核心属性：`container-type`、`container-name`、`@container`。

```css
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; }
}
```

> 完整示例见 `references/code-examples.md` 模式 1 章节

### 模式 2：流体排版

使用 `clamp()` 创建在不同视口宽度间平滑缩放的字号和间距系统。

```css
:root {
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
}
```

> 完整示例见 `references/code-examples.md` 模式 2 章节

### 模式 3：CSS Grid 响应式布局

使用 `auto-fit`/`auto-fill` 和命名区域创建自适应网格布局。

```css
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}
```

> 完整示例见 `references/code-examples.md` 模式 3 章节

### 模式 4：响应式导航

移动端使用折叠菜单，桌面端展示完整水平导航。

> 完整示例见 `references/code-examples.md` 模式 4 章节

### 模式 5：响应式图像

使用 `<picture>` 元素实现艺术指导，使用 `srcset` 实现分辨率切换。

> 完整示例见 `references/code-examples.md` 模式 5 章节

### 模式 6：响应式表格

桌面端使用标准表格，移动端转换为卡片式布局或水平滚动。

> 完整示例见 `references/code-examples.md` 模式 6 章节

## 视口单位

- `vh`/`vw`：标准视口高度/宽度百分比
- `dvh`：动态视口高度（推荐用于移动端，考虑浏览器 UI 变化）
- `svh`：小视口高度（最小值）
- `lvh`：大视口高度（最大值）

```css
.hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
}
.full-height-dynamic {
  height: 100dvh;
}
```

> 完整示例见 `references/code-examples.md` 视口单位章节

## 最佳实践

1. **移动优先**：从移动端样式开始，逐步增强大屏体验
2. **内容断点**：基于内容而非设备设置断点
3. **流体优于固定**：字号和间距使用流体值
4. **容器查询**：用于组件级响应式行为
5. **真机测试**：模拟器无法发现所有问题
6. **性能优化**：优化图像，延迟加载屏幕外内容
7. **触摸目标**：移动端保持最小 44x44px 的触摸区域
8. **逻辑属性**：使用 inline/block 方向以支持国际化

## 常见问题

- **水平溢出**：内容突破视口宽度
- **固定宽度**：使用 px 而非相对单位
- **视口高度**：100vh 在移动浏览器中的问题
- **字号过小**：移动端文字太小难以阅读
- **触摸目标过小**：按钮太小无法准确点击
- **宽高比失真**：图像被压缩或拉伸
- **Z-Index 层级**：覆盖层在不同屏幕上错位

使用说明

# 响应式设计

使用容器查询、流体排版、CSS Grid 和移动优先策略实现现代响应式布局。

## 功能特性

- 容器查询实现组件级响应式
- CSS clamp() 流体字号与间距系统
- CSS Grid 和 Flexbox 布局模式
- 移动优先断点策略
- 响应式图像、导航、表格方案
- 动态视口单位支持

## 使用方式

1. 确定布局需求和目标设备范围
2. 触发本技能，描述响应式需求
3. 选择合适的布局模式和断点策略
4. 参考代码示例实施响应式组件

## 触发词

响应式、自适应布局、CSS Grid

## 参考文档

- `references/code-examples.md`：完整的 CSS 和 React 代码示例

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。