responsive-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Responsive Design Guidelines

响应式设计指南

Core Principles

核心原则

Write semantic HTML to improve accessibility and SEO
Use CSS for styling, avoiding inline styles
Ensure responsive design using media queries and flexible layouts
Prioritize accessibility by using ARIA roles and attributes
Design mobile-first, then enhance for larger screens

编写语义化HTML以提升可访问性与SEO
使用CSS进行样式设置，避免内联样式
利用媒体查询和弹性布局实现响应式设计
通过ARIA角色与属性优先保障可访问性
采用移动优先设计，再针对更大屏幕进行增强

Mobile-First Approach

移动优先方法

Strategy

策略

Start with styles for the smallest viewport
Add complexity through progressive enhancement
Base styles work without media queries
Media queries add features for larger screens

从最小视口的样式开始设计
通过渐进增强的方式增加复杂度
基础样式无需媒体查询即可生效
媒体查询为更大屏幕添加功能

Benefits

优势

Forces prioritization of essential content
Improves performance on mobile devices
Ensures core functionality works everywhere
Reduces CSS complexity and specificity issues

css

/* Base styles for mobile */
.container {
  padding: 1rem;
}

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

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

迫使开发者优先考虑核心内容
提升移动设备上的性能
确保核心功能在所有设备上可用
降低CSS复杂度和特异性问题

css

/* Base styles for mobile */
.container {
  padding: 1rem;
}

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

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

Flexible Layouts

弹性布局

Flexbox

Use for one-dimensional layouts (row or column)
Leverage
```
flex-wrap
```
for responsive wrapping
Use
```
gap
```
for consistent spacing
Combine with media queries for layout changes

用于一维布局（行或列）
利用
```
flex-wrap
```
实现响应式换行
使用
```
gap
```
保证间距一致
结合媒体查询进行布局调整

CSS Grid

Use for two-dimensional layouts
Leverage
```
auto-fit
```
and
```
auto-fill
```
for responsive grids
Use
```
minmax()
```
for flexible track sizing
Combine
```
fr
```
units with fixed minimums

css

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

用于二维布局
利用
```
auto-fit
```
和
```
auto-fill
```
实现响应式网格
使用
```
minmax()
```
设置弹性轨道尺寸
将
```
fr
```
单位与固定最小值结合使用

css

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

Container Queries

容器查询

Style components based on container size, not viewport
Use for truly reusable components
Define containers with
```
container-type
```

根据容器尺寸而非视口尺寸为组件设置样式
用于打造真正可复用的组件
通过
```
container-type
```
定义容器

Responsive Typography

响应式排版

Fluid Typography

流体排版

Use
```
clamp()
```
for responsive font sizes
Set minimum, preferred, and maximum values
Avoid text that's too small on mobile or too large on desktop

css

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

使用
```
clamp()
```
实现响应式字体大小
设置最小值、首选值和最大值
避免移动端文本过小或桌面端文本过大的问题

css

h1 {
  font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}

Units

单位

Use
```
rem
```
for scalable typography
Base
```
rem
```
on user's browser settings
Use
```
em
```
for component-relative sizing
Avoid fixed
```
px
```
values for font sizes

使用
```
rem
```
实现可缩放排版
基于用户浏览器设置定义
```
rem
```
基准
使用
```
em
```
实现组件相对尺寸
避免为字体大小使用固定
```
px
```
值

Responsive Images

响应式图片

Srcset and Sizes

Srcset与Sizes

Use
```
srcset
```
for multiple image resolutions
Use
```
sizes
```
to indicate display size at breakpoints
Let browser choose optimal image

html

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 800px"
  alt="Description"
>

使用
```
srcset
```
提供多分辨率图片
使用
```
sizes
```
指定断点处的显示尺寸
由浏览器选择最优图片

html

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 800px"
  alt="Description"
>

Picture Element

Picture元素

Use for art direction (different crops at different sizes)
Provide fallback with
```
<img>
```
element
Use media attributes for breakpoint-specific sources

用于艺术指导（不同尺寸下使用不同裁剪的图片）
通过
```
<img>
```
元素提供降级方案
为特定断点的资源使用media属性

Performance

性能优化

Include
```
width
```
and
```
height
```
attributes to prevent layout shift
Use
```
loading="lazy"
```
for below-fold images
Consider
```
aspect-ratio
```
CSS property

包含
```
width
```
和
```
height
```
属性以避免布局偏移
对折叠区域以下的图片使用
```
loading="lazy"
```
考虑使用
```
aspect-ratio
```
CSS属性

Media Queries

媒体查询

Common Breakpoints

常见断点

css

/* Small phones */
@media (min-width: 320px) { }

/* Large phones */
@media (min-width: 480px) { }

/* Tablets */
@media (min-width: 768px) { }

/* Laptops/Desktops */
@media (min-width: 1024px) { }

/* Large screens */
@media (min-width: 1280px) { }

/* Extra large screens */
@media (min-width: 1536px) { }

css

/* Small phones */
@media (min-width: 320px) { }

/* Large phones */
@media (min-width: 480px) { }

/* Tablets */
@media (min-width: 768px) { }

/* Laptops/Desktops */
@media (min-width: 1024px) { }

/* Large screens */
@media (min-width: 1280px) { }

/* Extra large screens */
@media (min-width: 1536px) { }

Feature Queries

特性查询

Use
```
@supports
```
for feature detection
Provide fallbacks for unsupported features
Test for specific CSS properties

使用
```
@supports
```
进行特性检测
为不支持的特性提供降级方案
检测特定CSS属性

Preference Queries

偏好查询

```
prefers-color-scheme
```
for dark/light mode
```
prefers-reduced-motion
```
for animation preferences
```
prefers-contrast
```
for contrast preferences

```
prefers-color-scheme
```
用于适配深色/浅色模式
```
prefers-reduced-motion
```
用于适配动画偏好
```
prefers-contrast
```
用于适配对比度偏好

Touch Targets

触摸目标

Sizing

尺寸要求

Minimum 44x44 pixels for touch targets
Provide adequate spacing between targets
Consider thumb reach zones on mobile

触摸目标最小尺寸为44x44像素
目标之间保留足够间距
考虑移动端拇指可触及区域

Interaction

交互设计

Don't rely solely on hover states
Provide touch alternatives for hover interactions
Use
```
@media (hover: hover)
```
for hover-capable devices

不要仅依赖悬停状态
为悬停交互提供触摸替代方案
对支持悬停的设备使用
```
@media (hover: hover)
```

Viewport Configuration

视口配置

Meta Tag

Meta标签

html

<meta name="viewport" content="width=device-width, initial-scale=1">

html

<meta name="viewport" content="width=device-width, initial-scale=1">

Best Practices

最佳实践

Always include viewport meta tag
Don't disable user scaling (avoid
```
user-scalable=no
```
)
Test with pinch-to-zoom enabled
Ensure content is usable at 200% zoom

始终包含视口meta标签
不要禁用用户缩放（避免使用
```
user-scalable=no
```
）
测试捏合缩放功能
确保内容在200%缩放时仍可正常使用

Testing

测试

Tools

工具

Browser DevTools device emulation
Real device testing when possible
Lighthouse for performance audits
W3C validators for code quality

浏览器DevTools设备模拟
尽可能进行真实设备测试
使用Lighthouse进行性能审计
使用W3C验证工具检查代码质量

Checklist

检查清单

Test at multiple viewport sizes
Test landscape and portrait orientations
Test with touch and mouse input
Test with keyboard navigation
Verify images load appropriate sizes
Check typography readability
Verify touch targets are adequate
Test with browser zoom

在多种视口尺寸下进行测试
测试横屏与竖屏方向
测试触摸与鼠标输入
测试键盘导航
验证图片加载了合适的尺寸
检查排版可读性
确认触摸目标尺寸达标
测试浏览器缩放效果

responsive-design

Original

Translation

Responsive Design Guidelines

响应式设计指南

Core Principles

核心原则

Mobile-First Approach

移动优先方法

Strategy

策略

Benefits

优势

Flexible Layouts

弹性布局

Flexbox

Flexbox

CSS Grid

CSS Grid

Container Queries

容器查询

Responsive Typography

响应式排版

Fluid Typography

流体排版

Units

单位

Responsive Images

响应式图片

Srcset and Sizes

Srcset与Sizes

Picture Element

Picture元素

Performance

性能优化

Media Queries

媒体查询

Common Breakpoints

常见断点

Feature Queries

特性查询

Preference Queries

偏好查询

Touch Targets

触摸目标

Sizing

尺寸要求

Interaction

交互设计

Viewport Configuration

视口配置

Meta Tag

Meta标签

Best Practices

最佳实践

Testing

测试

Tools

工具

Checklist

检查清单

Performance Considerations

性能考量

Critical CSS

关键CSS

Asset Optimization

资源优化