摘要：
--两个参数代表着响应尺寸--˃2）第二步：把页面的代码复制一份填写到div标签里面，每个标签的class类都代表着一个屏幕大小#这里面是前端源代码˂!
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">
<!--每个class类都代表一个屏幕的尺寸-->
<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尺寸时隐藏 |
4) 对应的电脑屏幕大小
| xs | <768px响应式栅格数或者栅格属性对象 | |||
| sm | ≥768px响应式栅格数或者栅格属性对象 | |||
| md | ≥992px响应式栅格数或者栅格属性对象 | |||
| lg | ≥1200px响应式栅格数或者栅格属性对象 | |||
| xl | ≥1920px响应式栅格数或者栅格属性对象 |