ElementUI响应式Layout布局xs,sm,md,lg,xl

响应式布局

参照了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屏等

比如:
md="8" 表示在中屏设备上占8份,一行最多可以显示3个
sm="6" 表示在小屏设备上占6份,一行最多显示4个

不该被忘记的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;
    }
}

给TA打赏
共{{data.count}}人
人已打赏
技术文档

JS的位移运算符转换成PHP

2022-6-1 0:05:39

源码分享

苹果MacCms V10模板 仿电影先生MXone自适应主题源码

2021-11-27 23:37:07

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
有新私信 私信列表
搜索