mobile-first-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Mobile-First Design

移动优先设计

Design interfaces starting with mobile as the foundation, then enhance for larger screens.

以移动端为基础设计界面，再针对更大屏幕进行功能增强。

Breakpoints

断点

Name	Width	Devices
Mobile	320-480px	iPhone SE, small Android
Tablet	481-768px	iPad mini
Desktop	769-1024px	iPad Pro, laptops
Large	1025px+	Desktop monitors

名称	宽度	适配设备
移动端	320-480px	iPhone SE、小屏安卓设备
平板	481-768px	iPad mini
桌面端	769-1024px	iPad Pro、笔记本电脑
大屏	1025px+	桌面显示器

Mobile-First CSS

移动优先CSS

css

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

.nav {
  display: none; /* Hidden on mobile */
}

.nav-toggle {
  display: block; /* Hamburger visible */
}

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

  .nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

css

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

.nav {
  display: none; /* Hidden on mobile */
}

.nav-toggle {
  display: block; /* Hamburger visible */
}

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

  .nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

Touch-Friendly Design

触控友好设计

css

/* Minimum touch target: 48x48px */
.button {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
}

/* Adequate spacing */
.list-item {
  padding: 16px;
  margin-bottom: 8px;
}

css

/* Minimum touch target: 48x48px */
.button {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
}

/* Adequate spacing */
.list-item {
  padding: 16px;
  margin-bottom: 8px;
}

Performance Requirements

性能要求

Metric	Target
First Contentful Paint	<3s on 3G
JS bundle	<100KB gzipped
Total page weight	<500KB

指标	目标值
首次内容绘制（First Contentful Paint）	3G网络下<3s
JS包体积	gzip压缩后<100KB
页面总资源大小	<500KB

Progressive Enhancement

渐进式增强

html

<!-- Layer 1: Semantic HTML (works without CSS/JS) -->
<nav>
  <a href="/home">Home</a>
  <a href="/about">About</a>
</nav>

<!-- Layer 2: CSS enhances appearance -->
<!-- Layer 3: JS adds interactivity -->

html

<!-- Layer 1: Semantic HTML (works without CSS/JS) -->
<nav>
  <a href="/home">Home</a>
  <a href="/about">About</a>
</nav>

<!-- Layer 2: CSS enhances appearance -->
<!-- Layer 3: JS adds interactivity -->

Best Practices

最佳实践

Start design at 320px width
Use relative units (rem, %, vw)
Test on real devices
Optimize images for mobile
Minimize JavaScript for initial load
Ensure readable text without zooming

从320px宽度开始设计
使用相对单位（rem、%、vw）
在真实设备上测试
针对移动端优化图片
减少首屏加载的JavaScript体积
无需缩放即可保证文本可读性