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

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

响应式布局


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

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>


包含的类名及其含义为:


hidden-xs-only - 当视口在 xs 尺寸时隐藏

hidden-sm-only - 当视口在 sm 尺寸时隐藏

hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏

hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏

hidden-md-only - 当视口在 md 尺寸时隐藏

hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏

hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏

hidden-lg-only - 当视口在 lg 尺寸时隐藏

hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏

hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏

hidden-xl-only - 当视口在 xl 尺寸时隐藏


尺寸解释


其实就是做了每行总共24个栅格,在不同尺寸的页面上如何分配宽度比例:

名称 尺寸
xs <768px
sm ≥768px
md ≥992px
lg ≥1200px
xl ≥1920px


官网地址


Element - The world's most popular Vue UI framework

相关文章
|
容器
layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案
layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案
366 0
|
编解码 前端开发
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
6041 0
Element el-row el-col 布局组件详解
|
3月前
|
小程序 容器
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
本文介绍了微信小程序中常用组件的使用方法,包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
微信小程序常用组件的简单使用 view,scroll-view,swiper,swiper-item,text,rich-text,button,image
|
7月前
|
小程序 前端开发
【微信小程序】-- 常用的基础内容组件介绍 -- text & rich-text & progress & icon(七)
【微信小程序】-- 常用的基础内容组件介绍 -- text & rich-text & progress & icon(七)
|
移动开发 JavaScript 前端开发
基于el-slider自定义range组件实践
日常工作中经常使用范围选择组件,例如进度条、日期范围选择等组件,常见组件库中经常使用的都是使用的圆形滑块形状,项目中有需要根据自定义去实现一个range组件,以下是基于element的el-slider组件进行改良封装的一个range组件。
422 0
|
小程序 前端开发 容器
【微信小程序】常用组件基本使用(view/scroll-view/swiper、text/rich-text、button/image)
【微信小程序】常用组件基本使用(view/scroll-view/swiper、text/rich-text、button/image)
245 0
Element el-icon 图标组件详解
本文目录 1. 背景 2. 使用方式 3. 图标列表
4847 0
Element el-icon 图标组件详解
|
iOS开发
iOS App Icon启动图尺寸配置适配iPhone XS XR XS Max等
前言 近期在开发新项目, 然后针对 App Icon 与 App LaunchScreen 都需要重新切一套, 需要把相应尺寸大小跟 UI 说明一下, 加上最近刚发布的我 iPhone XS XR XS Max都需要进行统一适配,同时为了让自己以及 UI 同事能更好的去了解 iPhone 不同尺寸特意整理了一下。
3756 0