vue AntD中栅格布局的四种大小xs,sm,md,lg

cssBootstrap栅格布局的四种大小xs,sm,md,lg

前端为了页面在不同大小的设备上也能够正常显示，通常会使用栅格布局的方式来实现。

使用bootStrap的网格系统时，常见到一下格式的类名

col-*-*

visible-*-*

hidden_*_*

中间可为xs,xsm,md,lg等表示大小的单词的缩写

右边为1-12之内、用于元素所占列数columns的数值

1.行
<a-row gutter={{ md: 6, lg: 12, xl: 12 }}></a-row>
gutter:
md: 中等屏幕 桌面显示器 (≥992px)
lg: 大屏幕 大桌面显示器 (≥1200px)
xl:
2.列
<a-col md={6} sm={24}></a-col>
md: 中等屏幕 桌面显示器 (≥992px)
sm: 小屏幕 平板 (≥768px)

xs extra small超小

sm small

md meddle

lg large

xl extra large超大

col-*对应所有设备

col-sm-平板--屏幕宽度等于或者大于576px

col-md-桌面显示屏--屏幕宽度大于或者等于768px

col-lg-大桌面显示器--屏幕宽度大于或者等于992px

col-xl-超大屏幕显示器--屏幕宽度大于等于1200px

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

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

尺寸解释

每行总共24个栅格，在不同尺寸的页面上如何分配宽度比例：

名称尺寸常用设备

xs<768px超小屏如：手机

sm≥768px小屏幕如：平板

md≥992px中等屏幕如：桌面显示器

lg≥1200px大屏幕如：大桌面显示器

xl≥1920px2k屏等

vue AntD中栅格布局的四种大小xs,sm,md,lg相关推荐

cssBootstrap栅格布局的四种大小xs，sm，md，lg,xl
前端为了页面在不同大小的设备上也能够正常显示,通常会使用栅格布局的方式来实现. 使用bootStrap的网格系统时,常见到一下格式的类名 col-*-* visible-*-* hidden_*_* ...
css----栅格布局的四种大小xs，sm，md，lg详解
当你想要内容大小随着屏幕大小自动适应的时候就可以使用也就是在pc端以及不同手机(显示屏大小不同)端内容也能够正常显示的时候: 一行最多占十二个标签,不管是大屏还是超小屏的时候. lg=* 一般用于大 ...
Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法 this.$router.go(0) location.reload() 跳转空白页再跳回原页面使用provide / inject ...
浅析 ant design vue 中 xs sm md lg xl xxl
含义参照 Bootstrap 的响应式设计,预设六个响应尺寸:xs sm md lg xl xxl. 具体解释 xs extra Small 超小 sm small 小 md medium 中等的 ...
布局的时候什么时候用xs,sm,md,lg?
参考知乎等网上资料,整理的! 当你想要内容大小随着屏幕大小自动适应的时候就可以使用bootstrap,也就是在pc端以及不同手机(显示屏大小不同)端内容也能够正常显示的时候. 一行最多占十二个标签,不 ...
Bootstrap栅格系统 xs sm md lg xl
Tips 使用Bootstrap的网格系统时i,常见到以下格式的类名: col-*-* visible-*-* hidden-*-* 中间可为xs, sm, md, lg等表示大小的单词缩写. 右边为 ...
VUE iView之栅格布局响应式布局
栅格布局: 我们采用了24栅格系统,将区域进行24等分,这样可以轻松应对大部分布局问题.使用栅格系统进行网页布局,可以使页面排版美观.舒适. 我们定义了两个概念,行row和列col,具体使用方法如下: ...
Vue中模板template的四种写法
<div id="app"><h1>我是直接写在构造器里的模板1</h1> </div><template id=" ...
Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
目录一. Vue Grid Layout 简介二.vue-grid-layout 的安装与使用三. 属性 3.1 gridItem 的必须属性 3.2 框架元素的实际宽度高度计算方式 3.3 元 ...

vue AntD中栅格布局的四种大小xs,sm,md,lg

vue AntD中栅格布局的四种大小xs,sm,md,lg相关推荐

最新文章

热门文章