之前没接触过responsive design这玩意，突然最近客户的项目都要求要有响应式设计的要求：
1，当浏览器缩放时，页面要根据浏览器大小，而自动适应。
2，当用手机或者移动设备打开页面时，页面会根据屏幕浏览器的大小自动适应。
3，移动设备有横屏和竖屏之分，页面也要相应适应
首页设计
UI设计师只设计出了2种mockup，一种是full site一种是mobile site然后扔过来，一看那mockup就知道是当前比较流行的设计风格。
1，页头head，左logo右菜单：在full site时菜单是横排过来，在mobile site时菜单是闭合起来，出现一个“三”和menu组成的菜单按钮；点击“三”按钮就动态下拉展开竖排的菜单，内容也相应向下移动，非常有动感，像APP应用。
2，slideshow 排列：在full site时是一组图片循环切换播放，每张图片内对应有一段文字描述；在mobile site时图片缩小，描术文字走到图片的下方
3，slideshow下方的4个item（图片在上，文字描述在下组成一个item）：full site时，4个item横排；mobile site时4个item竖排下来，图片用大图横向宽度拉宽占满。
4，页脚footer菜单：按比例占满，大小也相应调整
内页设计
UI设计师也只出了2种mockup
1，页头head，同上；
2，banner，full site时大banner，mobile site 时小banner
3，页面内容排版，full site时是分左右两部分排内容，中间用虚线隔开；mobile site时，中间虚线消失，右边内容顺势下来，内容由左右排过度到上下排。
4，页脚同上。
特殊内页一，项目展示页面
这是一个项目展示页面，要求有地图，图上有些highlighted小圆点，当鼠标mouse over就是弹出内容tips（图加简单项目描述加项目链接可链到项目详细描述页面），UI设计师也只出了2种mockup。
1，页头head，同上
2，大map banner，full site时map上面有些高亮小圆点代表每个特色项目，mouse over弹出项目内容tips；mobile site时变成小map banner，不需要弹出内容。
3，有个slidebar，full site时slidebar出现第一排显示4个item（特色项目展示：上图片下文字描述和链接可链到项目详细描述页面），多于4个时可以点左或者右边的三角按钮切换到显示第二排项目item；mobile site时，slidebar消失，所有项目竖排下来，排版是左图片右文字描述加链接。
4，页脚footer同上
特殊内页二，每个项目展示详细页面
这个页面排版风格有点样时尚杂志
1，页头head，同上。
2，项目概术，左简单描术右图片，下方再有文字段落，mobile时全部竖排下来
3，客户挑战，左简单描术右图片，mobile时全部竖排下来
4，解决方案，左简单描术右图片，mobile时全部竖排下来
5，总结，左简单描术右图片，mobile时全部竖排下来
6，页脚footer同上
刚做完几个简单的响应式设计的网站项目下来，杂七杂八 （一）,布布扣,bubuko.com
原文：http://www.cnblogs.com/fastmover/p/3835365.html