参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸: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>
Element 额外提供了一系列类名,用于在某些条件下隐藏元素。这些类名可以添加在任何 DOM 元素或自定义组件上。如果需要,请自行引入以下文件:
import 'element-ui/lib/theme-chalk/display.css';
包含的类名及其含义为:
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
尺寸时隐藏每行总共24个栅格,在不同尺寸的页面上如何分配宽度比例:
名称 | 尺寸 | 常用设备 |
---|---|---|
xs | <768px | 超小屏 如:手机 |
sm | ≥768px | 小屏幕 如:平板 |
md | ≥992px | 中等屏幕 如:桌面显示器 |
lg | ≥1200px | 大屏幕 如:大桌面显示器 |
xl | ≥1920px | 2k屏等 |
@media
我们可以使用@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;
}
}
文章标题:ElementUI响应式Layout布局xs,sm,md,lg,xl
文章作者:未知用户
文章链接:[复制]
最后修改时间:2024年 05月 17日 09时18分
商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。 本文采用CC BY-NC-SA 4.0进行许可。
Copyright © 2023--2025
豫ICP备2022014268号-1
我们历经沧桑,这样错过了一生最好的时光,错过了便是永远