前端適配布局百分比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;
}