element-ui中元素对屏幕的适应

几个有用的方法

<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
        <div class="card-panel-icon-wrapper icon-people">
          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            {{ $t('dashboard.panel1') }}
            <!-- New Visits -->
          </div>
          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
        </div>
      </div>
    </el-col>
...

注意里面的这一句：

 <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">

其中的xs，sm之类的就是对不同大小屏幕适应的配置。 具体设置如下：

xs	<768px
sm	≥768px
md	≥992px
lg	≥1200px
xl	≥1920px

那么数字具体使用什么含义呢？默认把宽度分成24个块，数字就是占用的块数。 比如，:xs=“12”，意思是如果屏幕小于768，则一个列占用12/24*width像素，总体就是一行2个元素。