移动WEB开发之流式布局（百分比布局）

来自pink老师笔记
所谓的流式布局就是我们常说的百分比布局，页面中盒子的宽度常常是通过百分比值来设置的。

流式布局的特征：

• a、宽度自适应，高度写死，并不是百分百还原设计图
• b、图标都是固定死大小的，包括字体等也是固定死的。并不是所有的东西都是自适应的。
• c、一些大的图片，设置宽度为百分比自适应即可，随着屏幕大小进行变化

经典的流式布局

• 左侧固定，右侧自适应
• 右侧固定，左侧自适应
• 两侧固定，中间自适应（圣杯布局，双飞翼布局）
• 等分布局

流式布局的缺点

虽然可以让各种屏幕都适配，但是显示效果不是非常的友好，因为只有几个尺寸的手机能够完美的显示出来视觉设计师和交互最想要的效果。但是目前使用流式布局的公司非常多，比如 亚马逊 、京东 、携程

假如设计给你一张640的设计图，你使用流式布局设计出来的页面在640的屏幕上可以完美的显示，但是如果在别的屏幕上显示的时候就会有拉伸的现象，这样就想的不那么完美。