element-ui前端响应式开发

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 响应式栅格数或者栅格属性对象