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 响应式栅格数或者栅格属性对象      
  • 相关阅读:
    眼睛的颜色 博弈
    codevs1281 矩阵乘法 快速幂 !!!手写乘法取模!!! 练习struct的构造函数和成员函数
    10 25日考试 数学题目练习 斐波拉契 打表
    线段树 模板
    榨取kkksc03 luogu1855 dp 裸二维费用背包
    低价购买 洛谷1108 codevs4748 dp
    [转] 经典排序算法
    [USACO08DEC] Trick or Treat on the Farm
    [NOIP2009] 靶形数独(搜索+剪枝)
    各种蒟蒻模板【如此简单】
  • 原文地址:https://www.cnblogs.com/xzcvblogs/p/13396226.html
Copyright © 2011-2022 走看看