⚡

FrontendResponsiveDesignStandards FrontendResponsiveDesignStandards

构建响应式、移动优先的布局，使用流体容器、灵活单位、媒体查询和触摸友好设计，适用于所有屏幕尺寸。当创建或修改UI布局、响应式网格、断点样式、移动导航或任何需要适应不同屏幕尺寸的界面时使用此技能。适用于涉及多设备支持、响应式设计模式或自适应布局的任何任务。

前端开发 0 次安装 0 次浏览 更新于 3/5/2026

前端响应式设计标准

规则： 移动优先开发，使用一致的断点、流体布局、相对单位和触摸友好目标。

何时使用此技能

  • 当创建或修改需要在移动设备、平板和桌面上工作的布局时
  • 当实现移动优先设计模式，从移动布局开始
  • 当编写媒体查询或断点特定样式时
  • 当使用灵活单位（rem、em、%）而不是固定像素进行可扩展性设计时
  • 当实现基于百分比宽度或flexbox/grid的流体布局时
  • 当确保触摸目标满足最小尺寸要求（移动设备44x44px）时
  • 当优化不同屏幕尺寸和移动网络的图像和资产时
  • 当在多个设备大小和断点测试UI时
  • 当在所有屏幕尺寸上保持可读的排版时
  • 当在CSS框架中使用响应式设计工具（Tailwind、Bootstrap响应类）时

此技能为Codex提供了特定指导，说明如何遵守与前端响应式相关的编码标准。

移动优先开发 - 强制

始终从移动布局开始，然后为更大的屏幕增强。

不良（桌面优先）:

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

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

良好（移动优先）:

.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);
  }
}

为什么移动优先：

  • 强制内容优先级
  • 在移动设备上更好的性能（无需覆盖）
  • 逐步增强优于优雅降级

标准断点

识别并一致使用项目断点：

常见的断点系统：

Tailwind:

sm: 640px   (小平板)
md: 768px   (平板)
lg: 1024px  (笔记本电脑)
xl: 1280px  (桌面)
2xl: 1536px (大桌面)

Bootstrap:

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

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

使用（Tailwind）:

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

使用（CSS）:

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

除非明确需要，否则不要使用任意断点，如850px或1150px。

流体布局

使用灵活的容器适应屏幕尺寸：

不良（固定宽度）:

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

良好（流体）:

.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)

相对单位优于固定像素

使用rem/em进行可扩展性和可访问性：

不良：

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

良好：

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用于可读行长度）

框架工具自动处理此问题：

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

触摸友好设计

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

不良：

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

良好：

.icon-button {
  width: 24px;
  height: 24px;
  padding: 12px; /* 总计：48x48px */
  /* 或使用min-width/min-height */
  min-width: 44px;
  min-height: 44px;
}

触摸目标清单：

  • [ ] 按钮最小44x44px
  • [ ] 文本中的链接有足够的间距
  • [ ] 表单输入有足够的高度（最小44px）
  • [ ] 图标按钮有填充以获得更大的点击区域
  • [ ] 交互元素之间的间距（最小8px）

可读排版

在不缩放的情况下保持可读的字体大小：

不良：

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

良好：

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）

响应式排版：

h1 {
  font-size: 2rem;
}

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

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

或使用clamp（流体）:

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

移动设备上的内容优先级

首先显示最重要的内容，隐藏或折叠次要内容：

不良：

<div>
  <Sidebar /> {/* 移动设备上的全侧边栏 */}
  <MainContent />
</div>

良好：

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

策略：

  • 在移动设备上隐藏非必需元素
  • 使用汉堡菜单进行导航
  • 折叠手风琴/标签以显示次要内容
  • 在移动设备上垂直堆叠布局
  • 使用order属性重新排序内容

图像优化

为设备大小提供适当的图像：

不良：

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

良好：

<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"
>

或使用现代格式：

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

框架特定：

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

跨设备测试

在完成工作前验证关键断点处的布局：

测试清单：

  • [ ] 移动设备（375px - iPhone SE）
  • [ ] 移动设备大（414px - iPhone Pro Max）
  • [ ] 平板（768px - iPad）
  • [ ] 笔记本电脑（1024px）
  • [ ] 桌面（1440px）

测试方法：

  1. 浏览器DevTools响应模式
  2. 实际设备测试（iOS/Android）
  3. 浏览器扩展（Responsive Viewer）
  4. 自动化视觉回归测试

常见问题检查：

  • 移动设备上的水平滚动
  • 文本溢出或截断
  • 重叠元素
  • 无法阅读的字体大小
  • 触摸目标太小
  • 图像未加载或失真

常见响应式模式

导航：

// 移动设备：汉堡菜单
// 桌面：水平导航
<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 {
  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); }
}

侧边栏布局：

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

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

验证清单

在完成响应式工作之前：

  • [ ] 从移动布局开始
  • [ ] 使用项目的标准断点
  • [ ] 实施流体布局（无固定宽度）
  • [ ] 使用相对单位（rem/em）进行尺寸设置
  • [ ] 触摸目标最小44x44px
  • [ ] 无需缩放即可阅读的排版（正文16px+）
  • [ ] 在移动设备上优先显示内容
  • [ ] 为不同尺寸优化图像
  • [ ] 在所有关键断点处进行测试
  • [ ] 移动设备上无水平滚动
  • [ ] 无重叠或截断内容

快速参考

情况 操作
开始新布局 从移动设备（320-375px）开始
需要断点 使用项目标准（检查现有代码）
设置宽度 使用width: 100% + max-width
设置字体大小 使用rem（16px = 1rem）
设置间距 使用rem或框架工具
按钮太小 确保最小44x44px，带填充
文本太小 正文最小16px（1rem）
测试布局 检查375px、768px、1024px、1440px
图像加载慢 使用srcset和现代格式