手机移动端页面rem布局的关键点。

移动端页面布局的关键点。

移动端页面 头部多数高度44px。

底部 52px 54px  56px

///
box-sizing: border-box;怪异盒模型 ：假如一个div 300X300 padding:5px border:5px;  怪异盒模型 包括 padding和border 但不包括margin.

第一.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;//图片转为块
max-width:100%;　　//宽度设为100%
height:              //单位要改为rem
}

3，黑体字必须写

*{margin: 0;padding: 0;}
一下是移动端页面必须写的/
html{font-size:100px; }/*目的是让100px单位直接换算成1rem处理。*/

html{font-size:50px; }  //建议手机web页面 用 50px.

#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; //因为头部有48px 所以用margin-top跟头部隔开 margin-top值就是头部高度
   margin-bottom:44px;//底部也是跟底部隔开。 margin-bottom值就是底部高度

   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;
     } 
  } 
}

转载于:https://www.cnblogs.com/zyyweb/p/9470430.html