前端面试题库

Web移动端适配方案

3分钟阅读

✅ 推荐的方案

1. vw/vh 单位 (最推荐)

.container {
  width: 100vw;           /* 视窗宽度 */
  height: 50vh;           /* 视窗高度的50% */
  font-size: 4vw;         /* 响应式字体 */
  padding: 2vw;           /* 响应式内边距 */
}
 
/* 设置最小最大值 */
.title {
  font-size: clamp(16px, 4vw, 24px); /* 最小16px，最大24px */
}

2. CSS Container Queries (2022年后支持)

.card-container {
  container-type: inline-size;
}
 
@container (min-width: 300px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

3. Flexbox + 百分比

.layout {
  display: flex;
  flex-wrap: wrap;
}
 
.item {
  flex: 1 1 300px; /* 最小300px，自动伸缩 */
  min-width: 0;     /* 防止溢出 */
}

🚫 不推荐的老方案

rem + 媒体查询 (2014-2017年流行)

/* 需要写很多断点 */
@media (max-width: 320px) { html { font-size: 42.67px; } }
@media (max-width: 375px) { html { font-size: 50px; } }
@media (max-width: 414px) { html { font-size: 55.2px; } }
/* ...更多断点 */
 
.container { width: 7.5rem; } /* 需要计算 */

缺点：

  • 需要 JavaScript 动态设置 font-size
  • 媒体查询断点繁多
  • 计算复杂，不够直观
  • 在某些设备上可能有精度问题

🎯 现代最佳实践

基础设置

/* 1. 设置视窗 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
/* 2. 使用现代CSS重置 */
* {
  box-sizing: border-box;
}
 
/* 3. 响应式图片 */
img {
  max-width: 100%;
  height: auto;
}

组合方案

.container {
  width: min(100vw - 2rem, 1200px); /* 最大宽度限制 */
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2rem);   /* 响应式内边距 */
}
 
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

📱 移动端特殊考虑

/* 处理安全区域 */
.header {
  padding-top: env(safe-area-inset-top);
}
 
/* 防止横屏时字体过大 */
@media (orientation: landscape) {
  .title {
    font-size: min(4vw, 6vh);
  }
}
 
/* 触摸友好的点击区域 */
.button {
  min-height: 44px; /* iOS 推荐最小点击区域 */
  min-width: 44px;
}

总结

推荐优先级：

  1. vw/vh + clamp() - 最灵活，兼容性好
  2. CSS Grid/Flexbox - 布局首选
  3. Container Queries - 组件级响应式
  4. rem + 媒体查询 - 已过时

现代方案更简洁、性能更好，也更符合当前的开发趋势。