为了使页面能够正常显示在不同尺寸的设备上，通常采用网格布局。
使用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>尺寸解释
每行共不同尺寸的页面上分配宽度比：
| 名称 | 尺寸 | 常用设备 |
|---|---|---|
| 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; } }