zoukankan      html  css  js  c++  java
  • 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 响应式栅格数或者栅格属性对象      
  • 相关阅读:
    static关键字总结
    C、C++的内存分区与存储
    new、delete、malloc、free、realloc的区别
    Python3连接MySQL数据库之mysql-client
    Linux系统配置
    Windows环境下进行socket编程
    jQuery学习-事件之绑定事件(七)
    jQuery学习-事件之绑定事件(六)
    jQuery学习-事件之绑定事件(五)
    jQuery学习-事件之绑定事件(四)
  • 原文地址:https://www.cnblogs.com/xzcvblogs/p/13396226.html
Copyright © 2011-2022 走看看