移动端布局那点事—多种布局总有你需要的

随着网络的快速发展，移动端设备页面也越来越重要。但由于各个手机的屏幕大小不一，那么如何让一个页面匹配各个页面呢。现在我们来看看下面的几种布局方式。
注意我们要想在移动端完美显示效果，需要在head标签内加一个viewport的meta标签

<meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

弹性盒模型布局

1. 需要在父级开启弹性盒模型：display:-webkit-box;
2. 自己设置需要的大小(份数)：-webkit-box-flex:1;（份数/总份数）
3. 如果有固定宽度(设置好的px宽度)，先剔除掉固定的宽度再按照份数划分
4. 注意 不要用浮动和定位
   我们先简单的用一下：

<div id="box">    
      <div style="background:red">left</div>    
      <div style="background:green">center</div> 
      <div style="background:blue">right</div>
</div>

CSS样式开启弹性盒模型，并设置子级的宽度

#box{ display:-webkit-box;}
#box div{  
      /* 当然了这里我们也可根据具体需求设置我们所需的大小 */
      -webkit-box-flex:1;  
      height:300px;
}

效果如下：

5. 设置子级div竖直排列（每个占一行，高度分割）：-webkit-box-orient: vertical;要给父级加哦
6. 将子级div进行倒序排列：-webkit-box-direction: reverse;要给父级加哦

<div id="box">   
     <div style="background: red;">1</div>    
     <div style="background: yellow;">2</div> 
     <div style="background: blue;">3</div> 
     <div style="background: green;">4</div>
</div>

在CSS中设置子级div所占份数，并竖直倒序排列

html,body{  
    height:100%;  
    overflow: hidden;
}
#box{  
     display:-webkit-box; 
     -webkit-box-orient: vertical;
     -webkit-box-direction: reverse; 
     height:100%;   
     font-size:100px;   
     text-align: center; 
     color: #fff;
}
#box div{ -webkit-box-flex:1;}

效果如下：

接下来我们，回到一个老问题让未知宽高的div，在父级内垂直水平居中呢？这里我们加深点难度让一组未知宽高的div在父级内垂直水平居中。
我们不得不说的是弹性盒模型里正好有此属性

7. 让子级元素垂直方向居中：-webkit-box-align: center;要给父级加哦
8. 让子级元素水平方向居中：-webkit-box-pack: center;要给父级加哦

<div id="box">   
     <div class="div1" style="background-color: lawngreen">div1</div>  
     <div class="div2" style="background-color: red">div2</div>
</div>

在父级元素下设置弹性盒模型和相关样式

#box{ 
     display: -webkit-box;  
     width: 300px;height: 300px;   
     border: 1px solid #000;    
     margin: 100px auto; 
     /* 子级水平居中 */
    -webkit-box-pack: center;
   /* 子级垂直居中 */
   -webkit-box-align: center;
}
#box div{    width: 100px;height: 100px;}

效果如下：

流体式布局

基本思想就是：用100%来时div与父级的宽度一致并与浮动一起（width:100%+float）；
缺点：每一个设备上最终的显示效果都与设计图有出入。不完美
例(iphone4屏幕)：

<div id="wrap">   
   [站外图片上传中……(1)]
</div>

设置css样式

*{margin: 0;padding: 0}
#wrap  { width: 100%;}
#wrap img{    width: 100%;}

效果如下：

针对流体式布局的缺点有改进方式，就是设置一下min-width与max-width的值（某东用的）。但依然有缺点，就是让屏幕宽度大于max-width时，两侧会有留白
例：

<div id="wrap">   
   [站外图片上传中……(2)]
</div>

设置css样式

*{margin: 0;padding: 0}
#wrap  { 
   width: 100%;
   min-width:320px;
   max-width:640px;
}
#wrap img{    width: 100%;}

效果如下：

响应式布局

基本思想就是：利用媒体查询(@media)设置针对不同尺寸的设备展现不同的效果。用一套css兼容所有设备
注意写条件的时候，从大值往小值写，否则后面的会覆盖前面的

第一种方式，将判断条件写在style内

例：

<div></div>
<div></div>
<div></div>
<div></div>

CSS媒体查询设置

/* 设置默认的情况显示效果 */
div{    
    width:25%;  height: 100px;
    background: red; 
    /* css3的盒模型属性，内缩，border算在宽度(width)内 */
    box-sizing: border-box; 
    border:1px solid green; 
    float: left;
}
/* 平板情况显示效果  */
@media (max-width:1023px) {   
   div{ 
        width:50%; height: 100px;  
        background: red;     
        box-sizing: border-box;  
        border:1px solid green;    
       float: left;   
    }
}
/* 大屏手机情况显示效果 */
@media (max-width:480px) {   
 div{        
       width:100%; height: 100px; 
       background: red;     
       box-sizing: border-box;   
      border:1px solid green;        float: left;  
    }
}

效果如下：

默认情况 平板情况 大屏手机情况

第二种方式，将判断条件写在head的link标签内，需要创建对应的css文件

<link rel="stylesheet" href="css-1023.css" media="(min-width:1024px)">
<link rel="stylesheet" href="css-481-1023.css" media="(min-width: 481px) and (max-width: 1023px)">
<link rel="stylesheet" href="css-480.css" media="(max-width: 480px)">

相对单位布局(rem)

基本思路就是：利用rem单位，就是相对于跟（html）字体的大小，来计算相应元素的宽高

1. 一般将html的font-size设置为：20px或30px或50px或100px
2. 还有利用浏览器默认自己大小(16px)也就是16px*62.5%=10px，这样就是html{font-size:62.5%;}，而不是html{font-size:10px;}因为浏览器（PC）最小就是12px。这样一来1rem = 10px；
   我们来简单的看一下：

<div id="wrap"> 
     <div id="div1">我是一个div标签</div>
</div>

CSS设置样式

#wrap{    font-size: 20px;}
#div1{    
  font-size: 1em;  
  width: 16em;   
  height: 2em; 
  background-color: lawngreen;
}

效果如下：

这里说一下为啥不用em，因为em是相对于父级字体大小的，这样一层套一层比较麻烦，还有就是当我想改变其中一个div的字体大小时，整个布局就乱套了
还有一个问题就是当我们的浏览器窗口发生大小变化时，原来的布局是不是也应该完美的显示呢。这里我们就利用js来根据浏览器可视区(clientWidth)来重新给html设置响应的字体大小

/* 这里我们利用了一个自执行函数 */
(function(){  
    change();  
    function change(){     
         /* 这里的html字体大小利用了一个简单书序公式（十字相乘），当我们默认设置以屏幕320px位基准此时的字体大小为20px(320    20px),那么浏览器窗口大小改变的时候新的html的fontSize（clientWidth  新的值）就是clientWidth*20/320 */
         document.documentElement.style.fontSize = document.documentElement.clientWidth*20/320 + 'px';  
    }    
 /* 监听窗口大小发生改变时 */
  window.addEventListener('resize',change,false);})();

注意：一般情况下我们利用rem单位来设置元素的宽高就行，没必要页面中的所有元素都用rem来弄（当然了这个也得看具体需求了）