响应式布局之百分比布局

响应式布局即是一个页面能适应不同的终端，且能够呈现良好的显示效果。本文主要介绍一些平时做项目会用到的方法，复杂的项目也会同时用到其中的几种，根据项目实际情况进行选择。

百分比布局（流式布局）

百分比是一种相对于包含块的计量单位。利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素；

1. 究竟相对于谁的百分比？

有父元素则相对于父元素的宽度，无父元素则相对于浏览器窗口的宽度；

2. CSS中常用属性的百分比

子元素	父元素
width	基于父级的width
height	基于父级的height
margin（top,right,bottom,left）	基于父级的width
padding（top,right,bottom,left）	基于父级的width
left,top,right,bottom	基于父元素的width，height，width，height
font-size	基于继承得到的font-size
line-height	基于当前字体的font-size
transform(left, top)	基于自身的left， top

3. 代码示例

<style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      float: left;
      box-sizing: border-box;
    }
    .clear::after {
      content: '';
      display: block;
      clear: both;
    }
    .wrap {
      float: none;
      max-width: 1200px;
      min-width: 480px;
      margin: 0 auto;
      border: 2px solid black;
    }
    .m1, .m2, .m3 {
      border: 2px solid black;
      height: 200px;
    }
    .m1 {
      width: 30%;
      background: red;
    }
    .m2 {
      width: 50%;
      background: green;
    }
    .m3 {
      width: 20%;
      background: blue;
    }

  </style>

<div class="wrap clear">
    <div class="m1"></div>
    <div class="m2"></div>
    <div class="m3"></div>
  </div>

在不同尺寸下显示不同