本文主要是介绍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"><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>
包含的类名及其含义为:
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 |
官网地址
Element - The world's most popular Vue UI framework
这篇关于ElementUI响应式Layout布局xs,sm,md,lg,xl的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!