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

Posted 2020-12-29 zyyweb

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

第一.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;
     } 
  } 
}