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

这篇具有很好参考价值的文章主要介绍了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屏等文章来源地址https://www.toymoban.com/news/detail-442899.html

到了这里,关于vue AntD中栅格布局的四种大小xs,sm,md,lg的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue Grid Layout - 适用Vue.js的栅格布局系统(项目实例)

    gitee:grid-project-gitee B站视频:Vue-Grid-Layout 创建vue项目 vue create vite-layout // 使用 vue/cli 创建 vue 项目 下载依赖 npm i vue-grid-layout less less-loader@4 --s // 下载 vue-grid-layout依赖、less预处理器(两者保持版本相兼容即可) 项目样式重置 搭建 vue-grid-layout的环境 文件结构(暂定) - src |

    2024年02月09日
    浏览(34)
  • Vue Grid Layout -️ 适用Vue.js的栅格布局系统(保姆级使用教程)

    官网:Vue Grid Layout -️ 适用Vue.js的栅格布局系统 Gitee:https://gitee.com/wfeng0/vue2-grid-layout  在官网的描述中,我们可以看出,该栅格布局具有以下特性:  在具有 拖拽组成页面、组件动态调整大小、边缘碰撞监测 的系统中,使用该布局无疑是最合适的。当然,目前也有很多现成

    2023年04月16日
    浏览(38)
  • 鸿蒙开发-UI-布局-栅格布局

    鸿蒙开发-UI-布局 鸿蒙开发-UI-布局-线性布局 鸿蒙开发-UI-布局-层叠布局 鸿蒙开发-UI-布局-弹性布局 鸿蒙开发-UI-布局-相对布局 文章目录 前言 一、基本概念 二、格栅容器组件 1.栅格系统断点 2.布局的总列数 3.排列方向 4.子组件间距 三、格栅容器子组件 1.span 2.offset 3.order 四、

    2024年02月20日
    浏览(39)
  • 【vue2+antvx6】节点大小不一致,点击按钮流程图自动布局

    需求: 1、点击优化布局的按钮,自动布局(从左到右),按钮变成撤销布局按钮 2、点击撤销布局的按钮,返回之前的布局 3、在点击优化布局的按钮后,如果移动了节点,则自动将撤销布局的按钮变成优化布局的按钮 第一步:安装插件 第二步:写方法  全部代码

    2024年04月28日
    浏览(30)
  • cv::Mat的四种复制操作和cv::Mat作为函数形参的四种形式

    1、通过讲解cv::Mat类的深拷贝和浅拷贝来说明cv::Mat的四种复制操作 2、当cv::Mat作为函数形参时: cv::Mat temp 、 const cv::Mat temp 、 cv::Mat temp 、 const cv::Mat temp 这四种形参有什么区别?函数内部对Mat类形参数据的改变是否会影响到外面的Mat类实参数据? OpenCV2,数据结构Mat主要包含

    2024年02月10日
    浏览(61)
  • Qt栅格布局的示例

    这样写程序会崩溃的: 因为QLabel的生存周期太短了。

    2024年04月13日
    浏览(40)
  • CSS中的栅格布局

    在写前端项目的时候,我之前一直习惯使用flex布局,flex布局写起来比较随心,几乎可以实现任意形式的页面布局。不过自从B占看到某位大佬的grid布局后,发现布局居然还可以这么玩,正好自己在写一个vue3的项目,需要写几个大屏展示方案,用栅格布局实现了一下,发现真

    2024年02月07日
    浏览(32)
  • grid 栅格/网格布局学习笔记

             栅格布局或者说网格布局是很好用的东西,像一些商城类的排版就很适合用栅格布局,但是存在一定的兼容性问题,兼容性暂时还没有研究,这边学习总结是针对grid也就是栅格布局的使用的学习总结,下面将介绍我认为的常用的几个属性,如果想要更详细的学习

    2024年02月05日
    浏览(48)
  • Hive的四种排序方法

    hive排序方法,hive的排序方式 hive有四种排序方法: ORDER BY 、SORT BY 、DISTRIBUTE BY 、CLUSTER BY 0. 测试数据准备 uuid dept salary 1001 研发部 16000 1002 市场部 17000 1003 销售部 11000 1004 研发部 15000 1005 销售部 12000 1006 研发部 21000 1007 产品部 16000 1008 研发部 18000 1009 市场部 17000 1010 产品部 16

    2024年02月02日
    浏览(43)
  • JAVA 的四种访问权限

    在Java编程中,访问权限是非常重要的概念,因为它可以保证代码的安全性和封装性。访问权限有四种,分别是public、protected、default和private。 private :如果一个类的方法或者变量被 private 修饰,那么这个类的方法或者变量只能在该类本身中被访问,在类外以及其他类中都不能

    2024年02月09日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包