移动端样式适配方案

问题

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

解答

媒体查询

使用 CSS 媒体查询根据屏幕宽度应用不同样式：

@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;
}

移动端优先

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

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

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

图片适配

确保图片不会溢出容器：

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

使用 srcset 或 picture 元素提供不同尺寸的图片。

触摸友好

确保可点击元素有足够的触摸区域：

a, button {
  padding: 10px;
}

关键点

• 使用媒体查询针对不同屏幕尺寸设置样式
• 采用移动端优先策略，从小屏幕向大屏幕扩展
• 使用相对单位（rem、百分比）和弹性布局实现自适应
• 图片设置 max-width: 100% 防止溢出
• 触摸元素保持足够的点击区域（至少 44x44px）