如何用elementui做响应式布局

ElementUI 提供了一些响应式的布局组件，可以帮助我们更方便地实现页面的适配和响应式布局。下面是一些常用的响应式布局组件及使用方式：

1. `el-row` 和 `el-col`

`el-row` 和 `el-col` 是 ElementUI 中最基本的响应式布局组件，它们可以帮助我们实现基本的栅格布局。使用方法如下：

<template>
  <el-row>
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <!-- 内容 -->
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <!-- 内容 -->
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <!-- 内容 -->
    </el-col>
    <el-col :xs="24" :sm="12" :md="8" :lg="6">
      <!-- 内容 -->
    </el-col>
  </el-row>
</template>

上面的代码中，我们使用 `el-row` 来定义一行，然后在行内使用 `el-col` 来定义列。`el-col` 中的 `:xs`、`:sm`、`:md`、`:lg` 属性分别代表了在不同屏幕尺寸下的列宽比例。例如，在小屏幕下，每个列都会占据整个屏幕的宽度（即 `:xs="24"`），而在大屏幕下，每个列只会占据屏幕宽度的四分之一（即 `:lg="6"`）。

2. `el-container`、`el-header`、`el-aside` 和 `el-main`

`el-container`、`el-header`、`el-aside` 和 `el-main` 组成了 ElementUI 中的基础布局组件。使用方法如下：

<template>
  <el-container>
    <el-header>头部</el-header>
    <el-container>
      <el-aside>侧边栏</el-aside>
      <el-main>主体内容</el-main>
    </el-container>
  </el-container>
</template>

上面的代码中，我们使用 `el-container` 来定义页面的整体布局，然后在 `el-container` 中再嵌套 `el-header`、`el-aside` 和 `el-main` 来定义页面的不同部分。这些组件的布局方式是响应式的，可以自动适应不同的屏幕尺寸。

以上是 ElementUI 中常用的响应式布局组件及使用方法，希望能对你有所帮助。