移动端样式适配

问题

如何做移动端的样式适配？

解答

响应式设计

使用 CSS 媒体查询根据屏幕宽度应用不同样式，配合百分比宽度或 rem 单位实现自适应。

@media only screen and (max-width: 768px) {
  /* 小屏幕样式 */
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* 中等屏幕样式 */
}

@media only screen and (min-width: 1025px) {
  /* 大屏幕样式 */
}

弹性布局

使用 Flexbox 或 Grid 创建灵活的布局，让元素根据屏幕大小自动调整。

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1;
}

移动端优先

先定义移动端样式，再通过媒体查询逐步添加大屏幕样式。

/* 移动端基础样式 */
body {
  font-size: 14px;
}

/* 大屏幕增强样式 */
@media only screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

图片和多媒体适配

确保图片不会溢出容器，并提供不同尺寸的图片资源。

img {
  max-width: 100%;
  height: auto;
}

<picture>
  <source srcset="image-large.jpg" media="(min-width: 768px)">
  <img src="image-small.jpg" alt="描述">
</picture>

触摸交互优化

确保可点击元素有足够的触摸区域（建议至少 44x44px）。

a, button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

关键点

• 使用媒体查询和相对单位（rem、%）实现响应式布局
• 采用移动端优先策略，从小屏幕向大屏幕渐进增强
• 使用 Flexbox 或 Grid 创建灵活的布局结构
• 图片设置 max-width: 100% 防止溢出，使用 srcset 提供多尺寸资源
• 确保触摸元素有足够的点击区域，在真机和浏览器开发者工具中测试