ElementUI的几种响应尺寸

响应尺寸

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

尺寸的介绍

xs: 特小，手机端
sm: 小于浏览器一半宽度
md: 浏览器一半宽度左右
lg：接近浏览器全屏宽度
xl：浏览器全屏宽度

尺寸的划分

超小屏幕（手机）：<768px
小屏设备(平板):>=768px ~<992px
中等屏幕（桌面显示器）:>=992px ~<1200px
宽屏设备（大桌面显示器）：>=1200px

使用案例

<template>
  <div>
    <el-row :gutter="10">
      <el-col :xs="6" :sm="3" :md="5" :lg="4" :xl="4">
        <el-button class="btn" type="primary">手机登录</el-button>
      </el-col>
      <el-col :xs="18" :sm="21" :md="19" :lg="20" :xl="20">
        <el-input placeholder="请输入"></el-input>
      </el-col>
    </el-row>
  </div>
</template>