关于Element UI响应式布局问题
一、对于屏幕尺寸的定义
element UI参照Bootstrap的解决方案提供了五种屏幕大小尺寸:xs
、sm
、md
、lg
和 xl
。并对这五种尺寸提供了两种解决方案。
名称 | 尺寸 | 常用设备 |
---|---|---|
xs | <768px | 超小屏 如:手机 |
sm | ≥768px | 小屏幕 如:平板 |
md | ≥992px | 中等屏幕 如:桌面显示器 |
lg | ≥1200px | 大屏幕 如:大桌面显示器 |
xl | ≥1920px | 2k屏等 |
二、Element UI提供的两种解决方案
(一)在标签中指定元素所占大小
这种方式通常需要结合<el-row></el-row>
标签使用。在列元素中指定不同尺寸下元素所占的大小,例如:xs="4"
表示在手机上将一行分为24栏本元素占4栏。这种方法简化了CSS关于响应式布局代码的编写,但是需要配合<el-row></el-row>
标签使用,不是很灵活。
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
:xs="4"
表示在手机上将一行分为24栏本元素占4栏。这种方法简化了Css关于响应式布局代码的编写,但是需要配合<el-row></el-row>
标签使用,不是很灵活。
(二)使用样式类指定元素是否显示
这种方法需要导入element-ui/lib/theme-chalk/display.css
样式就可以实现在不同屏幕尺寸下,元素是否显示。这种方法的好处是不需要配合<el-row></el-row>
标签就可以使用,使用起来比较灵活。但是这种只能简单的对元素进行隐藏,如果需要实现稍微复杂点的响应式样式就要思考很多。使用这种方法首先需要导入样式:import 'element-ui/lib/theme-chalk/display.css';
。然后在目标元素上添加类名就行。例如:
<el-divider class="hidden-sm-and-up"></el-divider>
这表示<el-divider></el-divider>
元素在手机网页中显示,在平板及比平板屏幕大的设备上隐藏。下面是Element UI官网提供的一些用于隐藏元素的类名。
hidden-xs-only
- 当视口在xs
尺寸时隐藏hidden-sm-only
- 当视口在sm
尺寸时隐藏hidden-sm-and-down
- 当视口在sm
及以下尺寸时隐藏hidden-sm-and-up
- 当视口在sm
及以上尺寸时隐藏hidden-md-only
- 当视口在md
尺寸时隐藏hidden-md-and-down
- 当视口在md
及以下尺寸时隐藏hidden-md-and-up
- 当视口在md
及以上尺寸时隐藏hidden-lg-only
- 当视口在lg
尺寸时隐藏hidden-lg-and-down
- 当视口在lg
及以下尺寸时隐藏hidden-lg-and-up
- 当视口在lg
及以上尺寸时隐藏hidden-xl-only
- 当视口在xl
尺寸时隐藏
三、不该被忘记的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;
}
}