布局专攻文！如何搞定响应式网页的布局设计？

编者按：作为今年大热的设计趋势网站优化公司，响应式已然是设计师的标配技能。今天阿里的同窗从响应式设计的布局类型、布局实现两方面深入讲解，有哪些实现布局的体例，该采用何种体例，都有相当专业详尽的解答，不多说，来收！

Heyuchan ：在谈响应式布局前，我们先梳理下网页设计中整体页面排版布局，常见的主要有如下几种类型：

布局类型：

布局实现

采用何种体例实现布局设计，也有不同的体例，这里基于页面的实现单位而言，分为四种类型：固定布局、可切换的固定布局、弹性布局、混合布局。

固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸； 可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度，选择好合适的那套宽度布局； 弹性布局：以百分比作为页面的基本单位品牌策划公司，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能好行使有用空间显现好佳效果； 混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能好行使有用空间显现好佳效果；只是混合像素、和百分比两种单位作为页面单位。

可切换的固定布局、弹性布局、混合布局都是目前可被采用的响应式布局体例。