位置: IT常识 - 正文
vue AntD中栅格布局的四种大小xs,sm,md,lg(element栅格布局)
编辑：rootadmin推荐整理分享vue AntD中栅格布局的四种大小xs,sm,md,lg(element栅格布局)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:antdesign vue pro,antd栅格布局,vue栅格布局,antd栅格布局,ant design vue 布局,antd栅格布局,vue栅格布局,antd栅格布局,内容如对您有帮助，希望把文章链接给更多的朋友！
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项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案(vue写css)
下一篇：德比郡高峰区的Winnats山口，英格兰 (© Christopher Drabble/Alamy)(德比郡在哪)