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

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

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

原文地址：https://www.cnblogs.com/zyyweb/p/9470430.html