什么是
自适应网页设计?

自适应设计网站自主适应浏览环境的变化

传统网页设计 (固定宽度页面布局) or 自适应网页设计 (流式页面布局)

多种布局方式组合应用

大屏幕、中屏幕使用固定宽度布局。

小屏幕使用流式页面布局。

为什么需要自适应网页设计?

“时代在进步,不断涌现的各种新型设备(手机/平板电脑)、平台
和浏览器都需要你的网站的网页能够兼容显示。
自适应网页设计代表了一种必然的设计趋势
今后十年所有的网站都将采用自适应网页设计。” - Jeffrey Veen

小屏幕 + 中屏幕 + 大屏幕

一种设计兼容所有尺寸的屏幕

谁在使用自适应网页设计?

不仅仅只用在演示、
流行设计和页面美化中。大量的网站已经采用了
自适应网页设计。

波士顿环球报网站

采用自适应网页设计的大型网站

bostonglobe.com

Grey Goose

采用了自适应网页设计,并具有视差滚动动画效果

www.greygoose.com

Target

企业网站

corporate.target.com

美国总统奥巴马的网站

奥巴马的网站引领着Web前沿技术!

barackobama.com

...还有很多很多

mediaqueri.es

何时需要采用自适应网页设计?

当你需要考虑以下事情时:

如何实现自适应网页设计?

“停止考虑单一页面。考虑整个系统。” - Jeremy Keith

采用框架 (省时) or 自己开发 (更多自主应用)

最佳设计方法

哪里能学到更多的
自适应网页设计知识?

Ethan Marcotte

Responsive Web Design的作者

波士顿邮报网站的幕后主设计师

unstoppablerobotninja.com

Treehouse

网页设计与开发网站

teamtreehouse.com

Tuts+

非常好的网页设计教材资料网站

webdesign.tutsplus.com

This Is Responsive

Patterns, resources and news

bradfrost.github.com/this-is-responsive

框架

来自Twitter公司的简单的流式HTML/CSS/JS框架

Bootstrap

大屏幕、中屏幕采用固定宽度,
小屏幕采用流式单栏设计

goldilocksapproach.com

灵活的6-12网格框架

Foundation

极简的自适应网页设计框架。
含有Wordpress皮肤。

Skeleton

...还有更多

有用的东西

Respond.js enquire.js Style Tiles Masonry CSS-Tricks FitText FitVids ...更多

感谢

Created by John Polacek a Chicago Web Developer

Responsive Web Design Graphic by Bakken & Baeck

Goldilocks Approach by Front

Spectrum of Devices Image by ZURB

Responsive Web Design Book published by A Book Apart

Jeremy Keith Quotation from The Web Ahead Podcast

Jeffery Veen Quotation from a book review of ’Responsive Web Design‘

Corben Font by Vernon Adams

Scrolldeck and Scrollorama created by John Polacek

John Polacek on Google+