⚡

移动优先设计 mobile-first-design

移动优先设计是一种前端开发技能，专注于从移动设备开始构建响应式网站界面，通过CSS媒体查询定义断点，使用渐进增强技术适应平板和桌面屏幕。关键词包括移动优先、响应式设计、CSS、断点、触摸友好、性能优化。

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

name: 移动优先设计 description: 从移动屏幕开始设计响应式界面，通过渐进增强适应更大设备。在构建响应式网站、优化移动用户体验或实现自适应布局时使用。

移动优先设计

以移动设备为基础设计界面，然后为更大屏幕进行增强。

断点

名称 宽度 设备
移动 320-480px iPhone SE, 小尺寸Android
平板 481-768px iPad mini
桌面 769-1024px iPad Pro, 笔记本电脑
大屏 1025px+ 桌面显示器

移动优先CSS

/* 基础样式（移动设备） */
.container {
  padding: 1rem;
}

.nav {
  display: none; /* 在移动设备上隐藏 */
}

.nav-toggle {
  display: block; /* 汉堡菜单可见 */
}

/* 平板及以上 */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 720px;
    margin: 0 auto;
  }

  .nav {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }
}

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

触摸友好设计

/* 最小触摸目标：48x48像素 */
.button {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 24px;
}

/* 充足间距 */
.list-item {
  padding: 16px;
  margin-bottom: 8px;
}

性能要求

指标 目标
首次内容绘制 在3G网络下小于3秒
JS包 压缩后小于100KB
页面总重量 小于500KB

渐进增强

<!-- 层级1：语义HTML（在没有CSS/JS时工作） -->
<nav>
  <a href="/home">主页</a>
  <a href="/about">关于</a>
</nav>

<!-- 层级2：CSS增强外观 -->
<!-- 层级3：JS添加交互性 -->

最佳实践

  • 从320像素宽度开始设计
  • 使用相对单位（rem, %, vw）
  • 在真实设备上测试
  • 为移动设备优化图像
  • 最小化初始加载的JavaScript
  • 确保文本可读无需缩放