布局的几种大小xs，sm，md，lg，xl

xs extra small超小

sm small

md meddle

lg large

xl extra large超大

col-*对应所有设备

col-sm-平板--屏幕宽度等于或者大于576px

col-md-桌面显示屏--屏幕宽度大于或者等于768px

col-lg-大桌面显示器--屏幕宽度大于或者等于992px

col-xl-超大屏幕显示器--屏幕宽度大于等于1200px

ElementUI响应式Layout布局xs,sm,md,lg,xl 

<el-row :gutter="10">

  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>

  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"></el-col>

  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"></el-col>

  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>

</el-row>

尺寸解释

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

名称     尺寸                常用设备

xs       <768px           超小屏 如：手机

sm      ≥768px          小屏幕 如：平板

md      ≥992px         中等屏幕 如：桌面显示器

lg        ≥1200px       大屏幕 如：大桌面显示器

xl        ≥1920px        2k屏等