响应式布局

Posted 2020-12-19 maipocket-y

响应式布局

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

档位划分：三个节点，四个档位    

超小屏手机：xs < 768px

小屏平板：768px ≤ sm＜ 992px

中屏pc电脑屏：992px ≤ md＜1200px

大屏pc：1200px ≤ lg＜1920px　　　　　　（element-ui里面划分了五个档位）

超大屏：1920px ≤ xl

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

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