详解百分比布局问题！

（出于项目进行部分百分比布局开发需求的总结）

在所有的布局，固定布局，以及所谓的响应式等，更多的都是在关注宽度。

宽度，宽度，宽度！

无论是什么布局，想高度还原设计稿，首要考虑的就是宽度问题。尤其是在响应式和百分比布局中，更是重中之重！

回归百分比布局： 可以称之为 低配版的响应式。

业务场景和需求:  往往多用于列表渲染方面，以及其他简单活动界面，或者低级阅读界面等，这些用响应式就显的过于耗费精力。

性能：个人认为建立同样的项目业务需求，百分比布局应该是最消耗性能的。毕竟，浏览器要进行各种百分比的计算，这个计算成本往往太高。

不管出于什么样的业务需求和应用场景，既然选择了百分比布局，那就进入百分比开发吧！

再次……强调宽度！

1. 首先对整个页面进行块分区，每个模块的宽度都采取相对应的百分比。

例： left块  百分之五十   right 百分之四十  边距是百分之多少！

（ps，对照固定布局，固定布局中……我们是通过像素来控制，而在固定布局中进行的所有宽度配制，一定要是用百分比，只有具体的内容才会使用对应的宽度。）

2. 当你定义内容区域的宽度，区域之间的距离时，也就是各盒模型只见的间距，都需要采用百分比，绝对不能用固定宽度。哪怕是margin-left margin-right  也要用百分比！

3. 在进行百分比布局中，尽可能的从大块到小快，抛开具体内容实体，这些块都要用百分比。(内容实体，也就是会展示的内容文字图像图标等等。块，没有内容。)

百分比开发过程中的具体追求：

1. 百分比布局，窗口比例缩小到百分之五十，页面必乱。相达到缩放百分之五十，那首选是响应式开发了。

2. 我们追求……百分比布局，在屏幕缩小到四分之三，布局正常就可以了。这足以适应所有的pc

3. 在百分比布局中，往往放大是不会出问题的，而缩小会出问题。建议选择比较小的电脑屏幕进行开发。屏幕过大，可以根据情况将窗口缩放到15寸左右。

这些方法，不能避免所有的坑，却足以让你少踩一点坑。

（有建议和不足之处，欢迎补充！）