响应式设计，很多同事都有分享过这方面的知识，但是可能实际应用会比较少，刚好有个项目有这个需求，但是还没确认，这次就分享下做这个项目前找的一些响应式例子。

1、政府网站类型的，这个类型的网站总体来说还是比较保守的；

山东省政府  

上海市政府  

安徽省政府  

福建省政府   ;

重庆市政府  

汕头市政府  

佛山市政府  

...

看看重庆市政府的吧，主要是学习版块在浏览器缩小的时候的走向

2、

北京大学    

清华大学    

深圳大学    

复旦大学      

武汉大学    

南开大学    

...

北京大学、清华大学、深圳大学都做的很不错，带动态效果展示的不太好截图，大家自己看看，咱们看看南开大学的设计

有其他优秀的例子欢迎评论补充

总结起来，可以简单的归纳成三种组件的调整：内容增减、布局调整、样式调整。

第一种，内容增减。即部分模块在不同的分段内会有显示和隐藏的状态，尤其是一些网页端的内容觉得在小屏幕上展示会太多了，就在小屏幕场景中隐藏掉。

第二种，布局调整。主要是模块的排列和顺序发生变化，常见的就是模块一行的列数发生改变。

第三种，样式变更。即针对不同的分段设计完全不一样的样式，最多应用在导航栏的设计中，会为最小的分段使用Menu 样式

设计流程：

设计界面要吻合真实方法和需求，而不是根据我们想怎么做就怎么做，所以整个流程不能只站在设计师自身的角度考虑，而要和前端程序员紧密沟通，首先确定响应几个宽度区间，以及它们对应的数值分别是多少。

然后设计师就要完成对应数量页面的设计，因为前面我们说过，分段响应规则中会有明显的样式变动，这就要求设计师是一定要给出设计示例的，而不能依靠口头描述或程序员自由发挥。