常用布局类型

不同的布局设计，有不同的实现方式。以页面的宽度单位(像素或百分比)来划分，可以分为单一式固定布局，响应式固定布局和响应式弹性布局3种实现方式。

1.单一式固定布局：以像素作为页面的基本单位，不考虑多种设备屏幕及浏览器宽度，只设计一套固定宽度的页面布局。

2.响应式固定布局:响应式固定布局同样以像素作为页面单位，参考主流设备尺寸，设计多套不同宽度的布局。通过媒体查询技术识别不同屏幕或浏览器的宽度，选择符合条件的宽度布局

(3)响应式弹性布局:响应式弹性布局是以百分比作为页面的基本单位，可以适应一定范围内所有设备屏幕及浏览器的宽度，并能完美利用有效空间展现最佳效果。

响应式固定布局和响应式弹性布局都是目前可被采用的响应式布局方式。其中，响应式固定布局的实现成本最低，但扩展性比较差；响应式弹性布局是比较理想的响应式布局实现方式。本小节主要与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局。