移動端頁面rem布局的關鍵點。

標籤：直接   view   img   ice   大小   處理   注意   height   imu   

移動端頁面配置的關鍵點。

第一.rem布局：

1，必須寫

<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
2， 特別注意：對於移動端頁面的 banner圖 用img前景圖做。特別要對 <img class="img">標籤要做處理 
<img class=‘img‘/>
.img{
display:block;//圖片轉為塊
width:100%;　　//寬度設為100%
height:              //單位要改為rem
}

3，黑體字必須寫

*{margin: 0;padding: 0;}
////////////一下是移動端頁面必須寫的/////////////////////////////////////
html{font-size:100px; }/*目的是讓100px單位直接換算成1rem處理。*/
#app{ //最外面的div盒子
 font-size:0.16rem; //字型大小
 //position: relative;
 position: absolute;
 left: 0;
 right: 0;
 top:0;
 bottom:0;
 overflow: hidden;
  ////////////////////////////////////////////////
 #head{
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   
   background: green;
   height: 48px;
   line-height: 48px;
   text-align: center;

   h1{
    color: white;
    }
 }
 #section{

   width: 100%;
   /*-----讓中間內容撐到最上面和最下面 出現豎向捲軸---------------*/
   position: absolute;
   bottom: 0;
   top:0;
   overflow-y: scroll;
   /*-----------結束--------*/
   margin-top: 48px;
   margin-bottom:44px;

   ul>li{
     font-size: 40px;
   }
 }
 #foot {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;

      height: .44rem;
      text-align: center;
      line-height: .44rem;
      background: #00f;
      display: flex;
     a{
       display:inline-block;
       z-index: 11;
       flex:1;  /*給每一個a平均分配 flex:1*/
       color: #fff;
     } 
  } 
}

移動端頁面rem布局的關鍵點。