cssBootstrap栅格布局的四种大小xs，sm，md，lg,xl(css 栅格)

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

推荐整理分享cssBootstrap栅格布局的四种大小xs，sm，md，lg,xl(css 栅格)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:bootstrap栅格化布局,bootstrap 栅格,bootstrap栅格化布局,bootstrap 栅格,css栅格化布局,css3栅格布局,css3栅格布局,css 栅格布局,内容如对您有帮助，希望把文章链接给更多的朋友！

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

使用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≥1920px2k屏等不该被忘记的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; }}