前端适配布局百分比VW+rem

vw

　　css3新特性，100vm代表设备宽，1vm代表设备视窗宽度的1%

　　在实际应用中，一般以设备宽375为基准来设置（有的项目是750），算出100px所对应的vw值，一般取26.667vw.据此设置根元素的font-size，再根据rem去布局，完成不同设备的适配

       //视图宽度375

       1vw = 375/100 = 3.75px

       100px = 100/3.75 = 26.6667vm 

 

html {
  // font-size: 100px;
  //设备宽度 320px vw  1vw = 320/100 = 3.2px   100px = 3.2*100/3.2 =  100/3.2
  // font-size: 26.667vw;
  font-size: 26.667vw;
}
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}
header {
  height: 0.45rem;
  background-color: #00b38a;
  font-size: 0.2rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}