常见的网页布局

一、网页常见布局

二、网页布局分类

1、固定布局：

以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸

2、可切换的固定布局：

以像素作为页面的基本单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识 别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局

3、弹性布局：

以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽 度，并能完美利用有效空间展现最佳效果

4、混合布局：

同弹性布局类似；只是混合像素、和百分比两种单位作为页面单位

三、响应式布局

就是根据不同的分辨率，调整布局，上一页中的“可切换的固定布局”、“弹性布局”、 “混合布局”都属于响应式布局。

四、对比

• 可切换的固定布局： 实现成本最低，但拓展性比较差；

• 弹性布局与混合布局：对于不同类型的页面排版布局采用不用的实现方式。

• 通栏、等分结构的适合采用弹性布局方式

• 非等分的多栏结构采用混合布局的实现方式

五、布局响应的几种情况

布局不变，即页面中整体模块布局不发生变化，主要有：

1、模块中内容：挤压－拉：

2、模块中内容：换行－平铺：

3、模块中内容：删减－增加：

布局改变，即页面中的整体模块布局发生变化，主要有：

1、模块位置变换：

2、模块展示方式改变：隐藏－展开：

3、模块数量改变：删减－增加：

六、布局总结

单一方式的布局响应无法满足理想效果，需要结合多种组合方式，但原则上尽可能时保持简单轻 巧，而且保持统一逻辑。否则页面实现得太过复杂，也会影响整体体验和页面性能。