什么是
自适应网页设计？

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

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

多种布局方式组合应用

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

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

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

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

小屏幕 + 中屏幕 + 大屏幕

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

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

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

• 时间&金钱
• 各种浏览器支持
• 性能
• 内容呈现
• 网站vs移动应用

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

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

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

最佳设计方法

• 分析页面内容
• 从小屏幕开始(手机支持第一考虑)
• 关掉PhotoShop，打开浏览器
• 页面内容模块化
• 优化再优化
• *更好的设计方法会不断出现！

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

感谢

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+