cssBootstrap栅格布局的四种大小xs,sm,md,lg,xl
前端为了页面在不同大小的设备上也能够正常显示,通常会使用栅格布局的方式来实现。
使用bootStrap的网格系统时,常见到一下格式的类名
col-*-*
visible-*-*
hidden_*_*
中间可为xs,xsm,md,lg等表示大小的单词的缩写
右边为1-12之内、用于元素所占列数columns的数值
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
ElementUI响应式Layout布局xs,sm,md,lg,xl
<el-row :gutter="10"><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"></el-col><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"></el-col>
</el-row>
尺寸解释
每行总共24个栅格,在不同尺寸的页面上如何分配宽度比例:
名称 | 尺寸 | 常用设备 |
---|---|---|
xs | <768px | 超小屏 如:手机 |
sm | ≥768px | 小屏幕 如:平板 |
md | ≥992px | 中等屏幕 如:桌面显示器 |
lg | ≥1200px | 大屏幕 如:大桌面显示器 |
xl | ≥1920px | 2k屏等 |
不该被忘记的CSS语法
我们可以使用@media
语法来确定屏幕尺寸,并且指定在不同尺寸下的元素样式。例如,我们指定一个元素在不同屏幕尺寸下的大小:
@media screen and (min-width: 1200px) {.container {width: 1127px;margin-left: auto !important;margin-right: auto !important;}
}@media screen and (min-width: 922px) and (max-width:1199px) {.container {width: 933px;margin-left: auto !important;margin-right: auto !important;}
}@media screen and (min-width: 768px) and (max-width:922px) {.container {width: 723px;margin-left: auto !important;margin-right: auto !important;}
}@media screen and (max-width: 768px) {.container {width: 100%;padding: 0px 10px 0 10px !important;box-sizing: border-box;}
}
cssBootstrap栅格布局的四种大小xs,sm,md,lg,xl相关推荐
- vue AntD中栅格布局的四种大小xs,sm,md,lg
cssBootstrap栅格布局的四种大小xs,sm,md,lg 前端为了页面在不同大小的设备上也能够正常显示,通常会使用栅格布局的方式来实现. 使用bootStrap的网格系统时,常见到一下格式的类 ...
- 浅析 ant design vue 中 xs sm md lg xl xxl
含义 参照 Bootstrap 的 响应式设计,预设六个响应尺寸:xs sm md lg xl xxl. 具体解释 xs extra Small 超小 sm small 小 md medium 中等的 ...
- Bootstrap栅格系统 xs sm md lg xl
Tips 使用Bootstrap的网格系统时i,常见到以下格式的类名: col-*-* visible-*-* hidden-*-* 中间可为xs, sm, md, lg等表示大小的单词缩写. 右边为 ...
- css----栅格布局的四种大小xs,sm,md,lg详解
当你想要内容大小随着屏幕大小自动适应的时候就可以使用 也就是在pc端以及不同手机(显示屏大小不同)端内容也能够正常显示的时候: 一行最多占十二个标签,不管是大屏还是超小屏的时候. lg=* 一般用于大 ...
- 布局的时候什么时候用xs,sm,md,lg?
参考知乎等网上资料,整理的! 当你想要内容大小随着屏幕大小自动适应的时候就可以使用bootstrap,也就是在pc端以及不同手机(显示屏大小不同)端内容也能够正常显示的时候. 一行最多占十二个标签,不 ...
- CSS:xs,sm,md,lg是什么意思
当你想要内容大小随着屏幕大小自动适应的时候就可以使用bootstrap,也就是在pc端以及不同手机(显示屏大小不同)端内容也能够正常显示的时候. 一行最多占十二个标签,不管是大屏还是超小屏的时候. c ...
- mui栅格布局的两种方式(grid和list,宫格和列表)
文章目录 mui栅格布局的两种方式(grid和list,宫格和列表) 效果截图示下: 代码示下: mui栅格布局的两种方式(grid和list,宫格和列表) 效果截图示下: 代码示下: <!DO ...
- 双飞翼 html 布局,css实现双飞翼布局的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果 ...
- css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 左边 中间 右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
最新文章
- android fastjson java.lang.ClassCastException
- 二十、App爬虫环境搭建并测试监听微信
- jquery实现回车键触发事件
- DataList控件DataKeyField以及DataKeys区别
- Apache vs Lighttpd vs Nginx对比
- gravity与Layout_gravity的区别
- 不良事件总结怎么写_护理不良事件总结分析.doc
- Trace obtained enqueue information by set event 10704
- 计算机室nb代码,NB-iot SDK源码(Linux版)
- bzoj 1171 大sz的游戏 2892 强袭作战 (线段树+单调队列+永久性flag)
- 湖南工业大学计算机学院有哪些社团,湖南工业大学学生社团联合会
- PHP实现的7组经纬度与距离的计算函数
- linux系统程序问题报告,Linux程序设计实验报告.docx
- Google用AI技术为Allo增加表情符号建议按钮
- 华为路由器怎么看是不是公网_华为路由器怎么判断有没有被蹭网
- GICv3软件overview手册之GICv3基本功能(1)
- docker私服配置
- 《HeadFirst设计模式》读书笔记-第9章v1-迭代器模式
- Armbian挂载硬盘(以及自动挂载)
- 这7点不去做外汇交易难爆仓