关于移动端web的布局（一）——百分比布局

什么是流式布局

里面的内容随着屏幕的大小，从而向两处填充。页面布局的时候都是通过百分比来定义宽度，内容向两处填充

整体就像流动的液体一样。

viewport

简单的理解就是用户网页的可视区域（视口）。它是一个虚拟的区域，用来承载网页。打个比方"一张很大的相片需要放入小型的相框中，相框放不下，所以需要等比缩放照片"而viewport就相当于一个虚拟的区域去缩放照片然后放到浏览器中。

至于viewport更多的知识，暂时不介绍那么多。

移动端上viewport的设置

因为我们知道将PC端上的整个网页放到移动端上的时候，手机不能完全显示，会出现滚动条。所以我们就想怎么样才能让手机完全显示PC端的网页呢？

1. 网页的宽度必须和浏览器保持一致

2. 默认显示的缩放比例和PC端保持一致。(不然看不清或者失真)

3. 不允许用户自行缩放网页。

针对以上提出的方案，我们可以在移动端设置一个meta标签

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

介绍一下里面的属性

1. width控制 layout viewport的宽度, "device-width"为当前设备的宽度。
2. initial-scale: 页面初始缩放的比例。
3. user-scalable: 是否允许用户缩放。
4. maximum-scale：允许用户缩放到的最大比例。
5. minimum-scale：允许用户缩放到的最小比例。

当设置完meta标签后，也满足了我们提出的解决方案，那么现在我们手机浏览网页的显示和PC端一样了。

注意点

如果在移动端使用百分比布局的话，那么最好将box-sizing设置为border-box(最好去看一下css中的盒模型)，否则盒子的宽度不好计算。

  盒子： 

​    border: 1px solid #ccc;

​    width: 100%;

  因为默认是标准盒子，所以计算盒子实际宽度是: 100%+padding+border, 无法准确的计算盒子宽度。

在使用精灵图的时候，需要把图片缩小为原来的两倍才能完美显示,不失真(以iPhone 6为基准)。

使用float的时候要记住清除浮动，这要才能保证父元素的高度不会塌陷

  .clearFix::after,   */\*清除浮动\*/*

  .clearFix::before{

​    content: "";

​    display: block;

​    visibility: hidden;

​    height: 0;

​    line-height: 0;

​    clear: both;

  }