前端自适应布局

想要一个页面适应不同的屏幕，可以使用下面的方法

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div>内容</div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div>内容</div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div>内容</div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div>内容</div></el-col>
</el-row>

:xs=“4” :sm=“6” :md=“8” :lg=“9” :xl=“11”
调整参数，就可以适应不同屏幕，而不会使页面在不同分辨率的屏幕下显得杂乱。
屏幕被分成12分，参数是几，就是占几份。
如果需要一行占1个，参数就12（12/12）
如果需要一行占2个，参数就6（6/12）
如果需要一行占3个，参数就4（4/12）
…
xs ：<768px 响应式栅格数或者栅格属性对象
sm：≥768px 响应式栅格数或者栅格属性对象
md：≥992px 响应式栅格数或者栅格属性对象
lg：≥1200px 响应式栅格数或者栅格属性对象
xl：≥1920px 响应式栅格数或者栅格属性对象