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屏等