移动端布局

rem 布局

 (function(){
    var html = document.documentElement;
    var width = html.getBoundingClientRect().width;
    html.style.fontSize = width/18+'px';
    //1rem = 60px;    以iPhone6s 为准
  })();

将px直接转化成为rem即可

百分比+媒体查询布局

@media screen {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

flex弹性盒子布局

1.特点：

• 1、默认所有子元素都会在一行中显示，即使给子元素一个很大的宽度
• 2、父级加了这条属性，子级的float、vertical-align就会失效
• 3、如果兼容低版本的机型要加前缀-webkit-，包括后面讲的所有属性

2.属性：

容器属性（父元素样式）

flex-direction	子元素排列方向（主轴的方向）
flex-wrap	换行方式
flex-flow	以上两种方式的简写
justify-content	水平对齐方式（子元素在主轴上的对齐方式）
align-items	垂直对齐方式（子元素在交叉轴上的对齐方式）
align-content	多行垂直对齐方式（多根轴线的对齐方式）

项目属性（子元素样式）

order	排列位置
flex-grow	扩展比例
flex-shrink	收缩比例
flex-basis	元素的大小
flex	以上三个属性的简写
align-self	单独的垂直对齐方式（交叉轴方向上）

3.flex的计算：

扩展比例flex-grow计算：

• 当父级的宽度大于所有子元素宽度之和时，根据父级的剩余空间，设置子元素的扩展比例（设置后，元素给的固定宽度会被覆盖）
• 它是一个系数默认为0，即如果存在剩余空间，也不扩展
• 剩余空间
  剩余空间=父级的宽度-所有子元素的宽度和
• 子元素宽度计算公式
  子元素的宽度=（父级的宽度-所有子元素的宽度和）/所有子元素的flex-grow属性值之和*子元素的flex-grow属性值+子元素初始宽度

    <section id="s1">
            <div><span>赵圆圆</span></div>     
            <!--(1887-48-1500)/3*1+48=161-->
            <div><span>我是一只小蜜蜂，飞到西飞到东！</span></div>     
            <!--(1887-48-1500)/3*2+1500=1726-->
        </section>

收缩比例flex-shrink计算：

• 当所有子元素宽度之和大于父级宽度的时候，根据超出的空间，设置子元素的收缩比例（设置后，元素给的固定宽度会被覆盖）
• 它是一个系数默认为1，如果给个0的话，就不会收缩
• 超出空间
  超出空间=所有子元素的宽度和-父级的宽度
• 子元素宽度计算公式
  1、算出超出空间，所有子元素的宽度和-父级的宽度
  2、子元素的初始宽度*子元素的flex-shrink值
  3、算出第二步所有结果的和
  4、每个子元素的第二步/第三步*第一步
  5、子元素的初始宽度-第四步

<section id="s1">
            <!--
                1、80+1500-1000=580
                2、80*1=80       1500*1=1500
                3、80+1500=1580
                4、80/1580*580=29.367088607594937        1500/1580*580=550.632911392405
                5、80-29.367088607594937=50.63       1500-550.632911392405=949.37
            -->
            <div><span>我是赵圆圆</span></div>
            <div><span>我是一只小蜜蜂，飞到西飞到东！</span></div>     
        </section>

详情flex布局见阮一峰大神：
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html