移动端布局方案

移动端布局方案有很多，下面是一些常见的方案：

1. 媒体查询

使用 CSS3 的媒体查询来适配不同的屏幕尺寸。通过设置不同的 CSS 样式来适应不同的屏幕尺寸，例如：

/* 在小于等于 768px 的屏幕上使用 100% 宽度 */
@media screen and (max-width: 768px) {
  body {
    width: 100%;
  }
}

/* 在大于 768px 且小于等于 1024px 的屏幕上使用 80% 宽度 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  body {
    width: 80%;
  }
}

2. 百分比布局

使用百分比布局来适应不同的屏幕尺寸。通过将元素的宽度、高度等属性设置为百分比来适应不同的屏幕尺寸，例如：

.container {
  width: 100%;
  height: 100%;
}

.box {
  width: 50%;
  height: 50%;
}

3. rem 布局

使用 rem 布局来适应不同的屏幕尺寸。通过在根元素中设置字体大小，再在其他元素中使用 rem 单位来适应不同的屏幕尺寸，例如：

html {
  font-size: 16px;
}

.box {
  width: 10rem;
  height: 5rem;
}

4. vw 和 vh 布局

使用 vw 和 vh 布局来适应不同的屏幕尺寸。通过使用 vw 和 vh 单位来设置元素的宽度、高度等属性，例如：

.box {
  width: 50vw;
  height: 30vh;
}

以上是一些常见的移动端布局方案，每种方案都有其优缺点，具体选择哪种方案需要根据实际情况进行选择。