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 响应式栅格数或者栅格属性对象      
  • 相关阅读:
    63.Unique Paths II
    Java中的访问修饰符
    Java語言
    JRE与JDK
    Linux中ls命令详解
    硬盘主分区和拓展分区
    java中的静态初始化块
    java中的静态变量
    java中的静态方法
    java构造方法
  • 原文地址:https://www.cnblogs.com/xzcvblogs/p/13396226.html
Copyright © 2011-2022 走看看