移动端布局（流式布局与rem布局）

流式布局：又称百分比布局。

• 好处： 大屏幕下显示更多的内容。
• 坏处：宽屏下比例会有一些不协调。

rem布局：又称等比缩放布局。

• 好处：不同设备下看起来比较协调。
• 坏处： 显示的内容并不会在大屏幕展示的内容多。
• rem布局的原理：
  页面中的元素采用rem作为尺寸或者间距的单位。
  想办法去动态改变html标签的font-size大小，这样就可以适配不同的设备进行等比缩放。

如何做到font-size动态化？

• 通过JS （JavaScript）
  在iphone 6 -> font-size 100px ?
  document.documentElement.clientWidth(375) / 3.75 -> 100
  在iphone 6 plus -> font-size 大于 100px ?
  document.documentElement.clientWidth(414) / 3.75 -> 110.4
• 通过vw （vw是尺寸单位）
  vw ： view width
  vh ：view height
  相对单位：表示把屏幕自动分成了100vw宽和100vh高。
  vw / vh : 把屏幕分为100份，1vw等于屏幕宽的1%。
  iphone6 -> html的font-size ? -> 100px0
  1vw== 3.75px ? -> 26.66667vw -> 100px
  iphone6 plus -> html的font-size ? ->
  1vw == 4.14px ? -> 26.66667 * 4.14px ? -> 110.4px

例图：