zoukankan      html  css  js  c++  java
  • 响应式布局

    响应式布局

    市场约定的适配手机、平板、pc设备

    档位划分:三个节点,四个档位    

    超小屏手机:xs < 768px

    小屏平板:768px ≤ sm< 992px

    中屏pc电脑屏:992px ≤ md<1200px

    大屏pc:1200px ≤ lg<1920px      (element-ui里面划分了五个档位)

    超大屏:1920px ≤ xl

    @media screen and  (min- 1920px) {
        .bottom {
        height: calc(100% - 100px);
      }
    }
    @media (min- 992px) and (max- 1919px) {
        .bottom {
        height: calc(100% - 135px);
      }
    }
    @media screen and (max- 991px) {
        .bottom {
        height: calc(100% - 220px);
      }
    }

    优点:可以随便更换布局的功能区宽度,不需要改css源码,直接修改HTML结构上的类名

  • 相关阅读:

    list集合
    接口
    抽取对象的基本方法
    访问修饰符
    构造方法
    如何弹出一个对话框
    nginx反代配置
    TreeMap排序
    BeanPropertyRowMapper
  • 原文地址:https://www.cnblogs.com/Maipocket-y/p/13426750.html
Copyright © 2011-2022 走看看