elmentui移动端适配

在移动端适配中，ElementUI提供了两种方式：

1. 弹性盒子布局（Flexbox layout）：使用弹性盒子布局可以实现页面的自适应和响应式布局。

2. rem单位：在移动端适配中，rem单位可以根据屏幕大小调整字体大小和元素尺寸，从而实现页面的适配。

我们可以结合使用这两种方式来实现ElementUI的移动端适配，具体步骤如下：

1. 设置viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 引入flexible.js：该库可以根据设备屏幕大小动态调整根元素的字体大小，从而实现rem单位的自适应。

<script src="https://cdn.bootcdn.net/ajax/libs/amfe-flexible/0.2.0/index.min.js"></script>

3. 使用rem单位：在CSS中，可以使用rem单位实现元素的自适应。例如：

.el-button {
  font-size: 0.32rem; /* 设置字体大小为32px */
  padding: 0.2rem 0.4rem; /* 设置内边距为20px和40px */
}

4. 使用弹性盒子布局：在HTML中，可以使用弹性盒子布局实现元素的自适应。例如：

<div class="el-flex">
  <div class="el-flex-item">Item 1</div>
  <div class="el-flex-item">Item 2</div>
  <div class="el-flex-item">Item 3</div>
</div>

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

.el-flex-item {
  flex: 1;
  text-align: center;
}

通过以上步骤，我们可以实现ElementUI在移动端的自适应和响应式布局。