1.看网上的对element-ui的响应式开发介绍的都是片段，小白不容易理解，就把剩下的内容告诉小白怎么使用element-ui响应式组件
1）第一步
<el-row>
#两个参数设置成这样是为了整个页面都撑开
<el-col :lg="24" :xl="24">
</el-col>
</el-row>
2）第二步，把页面的代码复制一份填写到div标签里面，每个标签的class类都代表着一个屏幕大小
<el-row>
#两个参数设置成这样是为了整个页面都撑开
<el-col :lg="24" :xl="24">
<!--大屏幕-->
<div class="hidden-lg-and-down">
#这里面是前端源代码
</div>
<!--小屏幕-->
<div class=" hidden-xl-only">
#这里面填写复制代码
</div>
</el-col>
</el-row>
3）div中每个类的兼容的屏幕
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 尺寸时隐藏 |
原文：https://www.cnblogs.com/xzcvblogs/p/13396226.html