版权声明:本文为博主原创文章,允许转载,但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/89550415
引言:
elementUI的响应式布局;
参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。
官方文档 · 说明参考:
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 尺寸时隐藏
使用说明:
- 说明: 将对应的display.css
文件,直接在页面中引用即可!
- 注意:
- 引用的时候,需要放在
<style>
定义样式的前面,且尽量最前面(一般,可有效防止display.css中已定义类的样式不生效问题)。 - 引用成功之后,即可在页面中设置对应的.class类名
- 上述两步即可完成“基于断点的隐藏类” 的全部设置。
以上就是关于 “ elementUI响应式布局@media:基于断点的隐藏类 ” 的全部内容。