流式布局

在流式布局（Liquid）中，不同的区域使用百分比%定义宽度，使用像素（px）定义高度。页面元素可以根据可视区域 (viewport) 或父元素的实时尺寸进行调整，尽可能的适应各种分辨率。流式布局往往需要配合 max-width/min-width 等属性控制流动范围以免页面过大或者过小影响阅读。

比如：

  1. <article>
  2.      <div></div>
  3.     <div></div>
  4. </article>
article {
    width: 100%;
    margin: 0 auto;
    max-width: 980px;
    min-width: 320px;
}

article div {
    float: left;
    width: 50%;
    height: 200px;
}

article :first-child {
    background-color: skyblue;
}

article :last-child {
    background-color: blue;
}