年度盛宴：2012年最佳25个响应式网站设计作品《上篇》

• 2012年排名前20位的 CSS 网站作品
• 25佳优秀的流体和响应式布局网页设计
• 2012年最佳 Web 前端开发工具和框架
• 25个国外优秀的电子商务网站设计案例
• 85个很优秀的响应式网页设计作品范例

1. Microsoft

微软官方网站。幻灯片采用响应式设计，会随着窗口尺寸的变化而变化；

图文形式的产品介绍以及资源链接在小屏幕中会由横向排列变为纵向排列。

2. Adobe & HTML

Adobe 网站的 HTML 栏目主页。

在小屏幕中，头部的横向导航会变成标准风格的垂直按钮形式导航。

3. An Event Apart

在屏幕缩小的时候，横向图片形式的会议列表会变成两个一行的图文形式会议介绍，大图片会隐藏。

4. Ableton

在屏幕缩小的时候，头部的导航会变成下拉菜单的形式，右侧的内容会下移。

5. Build 2012

在小屏幕中，头部的导航会隐藏，变成一个图标，点击可以展开导航列表。

6. Contents

在屏幕缩小的时候，搜索框会变成下拉的形式，点击即可展开进行搜索。

7. CSS-Tricks

在屏幕缩小的时候，右侧栏的内容会下移，只保留文章列表在最前面。

8. Currys

在屏幕缩小的时候顶部的导航菜单会简化为 Browse、Stores 和 Acccount 三部分。

9. dConstruct 2012

在小屏幕下，会议信息会单行显示，特别的心眼，同事图片也会两个一行纵向排列。

梦想天空博客关注前端开发技术，展示HTML5和CSS3应用，分享jQuery插件，推荐网页设计案例。

10. Gov.uk

这是英国政府网站，来老外就是时髦啊，政府网站也用了响应式设计。

11. Heroku Status

这是国外著名的云应用平台 Heroku 的状态网站，在小屏幕下，轨道模式的图形展示变成纯文字模式。

12. Lotta Nieminen

这个网站的导航非常特别，是横向导航的。点击页面两侧的边栏即可进行前后导航。

您可能感兴趣的相关文章

本文链接：年度盛宴——2012年最佳25个响应式网站设计作品

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源