responsive-design

响应式设计

全面的响应式网页设计模式，助你构建能在所有设备类型和屏幕尺寸上无缝适配的布局。这是一项子技能——可将其应用于任何需要跨设备支持的设计或构建工作流。

何时使用此技能

• 构建任何必须兼容移动端和桌面端的新页面或组件
• 检查或修复响应式布局问题
• 将固定宽度设计改为响应式设计
• 为新项目设置断点系统
• 针对多个视口优化图像和排版

标准断点系统

除非项目另有规定，否则请使用以下默认断点：

:root {
  --breakpoint-sm: 640px;   /* Large phones */
  --breakpoint-md: 768px;   /* Tablets */
  --breakpoint-lg: 1024px;  /* Small desktops */
  --breakpoint-xl: 1280px;  /* Desktops */
  --breakpoint-2xl: 1536px; /* Large screens */
}

Tailwind 对应项： sm:, md:, lg:, xl:, 2xl:

第 1 步：移动优先方法

务必从最小屏幕（320px 及以上）开始设计，再逐步增强对更大视口的支持。

/* Base styles = mobile (no media query needed) */
.container {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem;
  }
}

规则：

• 必须使用 min-width 媒体查询（移动优先），而非 max-width
• 必须在 HTML 中包含 <meta name="viewport" content="width=device-width, initial-scale=1">
• 布局宽度必须使用相对单位（rem、em、%、vw、vh），而非固定的 px
• 不得设置 width: 1200px 这类固定宽度——请改用 max-width

第 2 步：布局模式

Flexbox——用于一维布局

响应式导航：

.nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nav {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

可换行的卡片行：

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 100%;           /* Full width on mobile */
}

@media (min-width: 768px) {
  .card { flex: 1 1 45%; }  /* 2 columns on tablet */
}

@media (min-width: 1024px) {
  .card { flex: 1 1 30%; }  /* 3 columns on desktop */
}

CSS Grid——用于二维布局

自动响应式网格（无需媒体查询）：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

带侧边栏的仪表板布局：

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

@media (min-width: 768px) {
  .dashboard {
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr;
  }
}

@media (min-width: 1280px) {
  .dashboard {
    grid-template-columns: 280px 1fr 300px;
  }
}

选择指南

使用场景	选用
导航栏、按钮组、工具栏	Flexbox
卡片网格、图库、产品列表	Grid（auto-fit）
带侧边栏的整页布局	Grid（显式列）
单个元素居中	Flexbox
复杂的二维仪表板	Grid

第 3 步：响应式图像

使用 srcset 切换分辨率：

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
  alt="Descriptive alt text"
  loading="lazy"
  decoding="async"
/>

使用 <picture> 实现艺术指导：

<picture>
  <source media="(min-width: 1024px)" srcset="hero-wide.webp" type="image/webp" />
  <source media="(min-width: 768px)" srcset="hero-medium.webp" type="image/webp" />
  <img src="hero-mobile.jpg" alt="Hero image" loading="lazy" />
</picture>

规则：

• 位于首屏以下的图像必须包含 loading="lazy"
• 必须提供有意义的 alt 文本
• 尽可能提供 WebP/AVIF 格式
• 必须设置合适的图像尺寸——不要向移动设备发送 2000px 的图像
• 在 Astro 项目中使用 Astro <Image> 组件（它会自动处理优化）

第 4 步：流式排版

使用 clamp() 实现平滑缩放且无需断点的排版：

:root {
  /* clamp(min, preferred, max) */
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.2rem + 2.5vw, 3rem);
  --text-3xl: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p  { font-size: var(--text-base); }

规则：

• 字体大小必须使用 clamp() 或相对单位，而非固定的 px
• 正文最小可读字号：16px（1rem）
• 行高应反向缩放：文字越大，行高越紧凑
• 触控目标：交互元素的高度至少为 44px

第 5 步：容器查询（现代 CSS）

用于不依赖视口的组件级响应式设计：

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

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

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
}

@container card (min-width: 600px) {
  .card {
    gap: 2rem;
  }
  .card-image {
    flex: 0 0 40%;
  }
}

适用场景：

• 在不同布局环境（侧边栏与主内容区）中使用的可复用组件
• 需要内在响应能力的设计系统组件
• 应根据容器而非视口调整布局的小部件/卡片模式

浏览器支持： 所有现代浏览器。在 2025 年及以后的项目中可放心使用。

第 6 步：常见响应式模式

显示/隐藏元素

.mobile-menu { display: block; }
.desktop-nav { display: none; }

@media (min-width: 768px) {
  .mobile-menu { display: none; }
  .desktop-nav { display: flex; }
}

响应式间距

.section {
  padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 4rem);
}

响应式表格 → 卡片模式

/* On mobile, transform table rows into stacked cards */
@media (max-width: 767px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead { display: none; }
  td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
  }
}

约束——硬性规则

规则	详情
必须	在所有 HTML 文档中包含 viewport meta 标签
必须	使用移动优先（min-width）媒体查询
必须	布局使用相对单位（rem、%、vw）
必须	在精确断点处测试：320、768、1024、1280、1536
必须	确保触控目标至少为 44px
不得	使用固定宽度（width: 1200px）——请改用 max-width
不得	在所有断点重复基础样式（遵循 DRY 原则）
不得	使用特定设备的断点（例如“iPhone 14”）
不得	在移动端隐藏必要内容——应调整布局，而不是隐藏内容

测试清单

在认为任何响应式实现已完成之前：

• 在 320px 宽度下正确渲染（最常见的最小移动设备宽度）
• 在 768px 下正确渲染（平板竖屏）
• 在 1024px 下正确渲染（平板横屏／小型桌面设备）
• 在 1280px 下正确渲染（标准桌面设备）
• 在 1536px 及以上宽度下正确渲染（大屏幕）
• 任意视口下都没有水平滚动条
• 移动设备上的触控目标至少为 44px
• 图片可按比例缩放，且不会溢出
• 所有尺寸下的文字都清晰易读（正文最小字号为 16px）
• 所有视口下都能访问导航
• 表单在移动设备上易于使用（输入类型和尺寸合适）

Tailwind CSS 快速参考

使用 Tailwind（v3 或 v4）时，请应用响应式前缀：

<div class="flex flex-col md:flex-row lg:grid lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8">
  <div class="w-full md:w-1/2 lg:w-auto">...</div>
</div>


<h1 class="text-2xl md:text-4xl lg:text-5xl">Heading</h1>


<section class="px-4 py-8 md:px-8 md:py-12 lg:px-16 lg:py-20">...</section>


<nav class="hidden md:flex">Desktop Nav</nav>
<button class="md:hidden">Menu</button>

与其他技能集成

此技能可作为以下技能的子技能：

• frontend-design — 构建任何 UI 组件时都可调用
• local-business-rebuild — 所有潜在客户的网站都必须具备完整的响应式适配
• website-rebuild — 响应式是核心要求
• prospect-qa — 在 QA 审查期间使用测试清单