element-ui 响应式布局

代码

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

说明：每行总共24个栅格，在不同尺寸的页面上如何分配宽度比例：

名称	尺寸
xs	<768px
sm	≥768px
md	≥992px
lg	≥1200px
xl	≥1920px

比如这里直接给xs赋值8，他的宽度在xs（<768px，手机）就是8/24。除了直接给赋值数字，也可以给对象如：{span:18,offset:3}。

• span即是仅赋值数值时的值，为宽度。
• offset为从左边的偏移量，也是1/24为单位。