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 響應式柵格數或者柵格屬性對象