响应尺寸

参照了 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>

在这里插入图片描述
在这里插入图片描述

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45 6 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 6 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐