CSS移动优先设计

移动优先（Mobile First）是一种渐进增强的设计理念，从小屏幕开始设计，逐步添加大屏样式。

核心理念

代码实现

移动优先写法

/* 基础样式：移动端 */
.container {
  width: 100%;
  padding: 10px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* 平板增强 */
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}

/* 桌面增强 */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

对比：桌面优先写法

/* 基础样式：桌面端 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 平板适配 */
@media (max-width: 1023px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 移动端适配 */
@media (max-width: 767px) {
  .container {
    padding: 10px;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

移动优先的优势

性能优化

/* 移动优先：小屏只加载必要样式 */
.banner {
  display: none; /* 移动端隐藏 */
}

@media (min-width: 1024px) {
  .banner {
    display: block; /* 大屏显示 */
    background-image: url('large-banner.jpg');
  }
}

内容优先

/* 移动端：核心内容优先展示 */
.sidebar {
  display: none;
}

.main {
  width: 100%;
}

@media (min-width: 1024px) {
  .sidebar {
    display: block;
    width: 300px;
  }

  .main {
    width: calc(100% - 300px);
  }
}

代码更简洁

/* 移动优先：渐进添加样式，代码更清晰 */
.card {
  font-size: 14px;
}

@media (min-width: 768px) {
  .card {
    font-size: 16px;
  }
}

/* 桌面优先：需要覆盖重置，代码冗余 */
.card {
  font-size: 16px;
}

@media (max-width: 767px) {
  .card {
    font-size: 14px; /* 覆盖默认值 */
  }
}

注意：Bootstrap、Tailwind CSS 等主流框架均采用移动优先策略。

要点总结

• 使用 min-width 媒体查询实现移动优先
• 基础样式适配小屏，渐进增强至大屏
• 移动端优先考虑内容，减少不必要的资源加载
• 与主流框架策略一致，便于协作维护