移动端布局⽅案

移动端布局方案通常有如下几种：

1. 使用百分比布局

百分比布局是一种常见的移动端布局方式，通过设置元素的宽度或者高度为百分比，从而实现自适应效果。例如：

.container {
  width: 100%;
}

.item {
  width: 50%;
  float: left;
}

2. 使用rem布局

rem是相对于根元素(html标签)的字体大小而言的，因此可以方便的实现响应式布局。

html {
  font-size: 100px;
}

.container {
  width: 10rem;
}

.item {
  width: 5rem;
  float: left;
}

3. 使用flexbox布局

Flexbox是一种CSS3新增的布局方式，可以轻松实现弹性布局，适用于各种尺寸的屏幕。例如：

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: auto;
}

4. 使用grid布局

grid布局是CSS3新增的二维网格布局系统，可以将父元素分割为多个行和列，灵活地控制子元素的位置和大小。例如：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(50px, auto);
  grid-gap: 10px;
}

.item {
  grid-column: 1/3;
  grid-row: 1/2;
}

以上是常见的移动端布局方案，可以根据具体的需求和项目情况选择适合的方案。另外，需要注意兼容性问题，部分浏览器可能不支持新的CSS布局方式，需要使用兼容处理。