📐 移动端布局方案

移动端布局经历了多个阶段的演进，目前主流方案是 Flexbox + rem/vw + 媒体查询 的组合。

四大布局方案对比

方案原理优点缺点
百分比 + 媒体查询 % 宽度 + @media 断点适配 简单直观，兼容性好 断点有限，不够精细
rem + 动态根字体 1rem = 根元素 fontSize，JS 动态设置 等比缩放，设计稿直接换算 需要 JS 配合，大屏可能过大
vw/vh 视口单位 1vw = 视口宽度的 1% 纯 CSS，真正响应式 部分场景需配合 calc()
Flexbox / Grid 弹性布局，自动分配空间 灵活强大，现代标准 学习曲线，IE 不支持

Flexbox 移动端常用模式

/* ===== 移动端 Flex 布局常用模式 ===== */

/* 顶部导航栏：左右分布 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 底部 Tab 栏：均分 */
.tab-bar {
  display: flex;
}
.tab-bar .tab-item {
  flex: 1;
  text-align: center;
}

/* 列表项：左侧图标 + 右侧内容 */
.list-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 圣杯布局：头 + 内容 + 底（满屏） */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page .content {
  flex: 1;           /* 撑满剩余空间 */
  overflow-y: auto;  /* 内容区独立滚动 */
}

CSS Grid 移动端实战

/* ===== 移动端 Grid 布局 ===== */

/* 商品卡片网格（2 列自适应） */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* 图文混排（3:2 比例） */
.card {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 16px;
}

/* 自适应列数 */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}