刚做完几个简单的响应式设计的网站项目下来，杂七杂八 （一）

之前没接触过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同上