响应式web设计与实现介绍 13年5月20⽇日星期⼀一 

• 什么是响应式web设计 • 响应式实例 • 针对的问题 • 优势 • 响应式实现 13年5月20⽇日星期⼀一 

响应式Web设计(Responsive Web design) —— fluid ⼀一个⺴⽹网站⻚页⾯面可以根据⽤用户⾏行为(改变浏览器窗⼝口⼤大⼩小等)和设备环境(系统平台、屏幕尺⼨寸、屏幕定向 等)进⾏行相应的响应和调整。 ⾃自适应web设计(Adaptive Web design) —— fixed/ fluid 具有固定断点(1200px/768px/480px等)，只需要考虑⺴⽹网⻚页的⼏几种尺⼨寸状态，属于响应式（⺴⽹网⻚页）设 计的⼀一种。 ⽐比如：⼀一淘⾸首⻚页 Adaptive Responsive ⊂ 13年5月20⽇日星期⼀一 

13年5月20⽇日星期⼀一 

• 什么是响应式web设计 • 响应式实例 • 针对的问题 • 优势 • 响应式实现 13年5月20⽇日星期⼀一 

1200px 990px 750px 13年5月20⽇日星期⼀一 

1200px 848px 随意缩⼩小浏览器窗⼝口 676px 466px 13年5月20⽇日星期⼀一 

• 什么是响应式web设计 • 响应式实例 • 针对的问题 • 优势 • 响应式实现 13年5月20⽇日星期⼀一 

响应式针对的问题 设备与分辨率⾰革新太快 13年5月20⽇日星期⼀一 

响应式针对的问题 不同设备相同功能 13年5月20⽇日星期⼀一 

响应式针对的问题 切换设备的屏幕定向⽅方式 13年5月20⽇日星期⼀一 

13年5月20⽇日星期⼀一 

13年5月20⽇日星期⼀一 

13年5月20⽇日星期⼀一 

ipad⽰示例 13年5月20⽇日星期⼀一 

响应式针对的问题 很多⽤用户不最⼤大化浏览器窗⼝口 13年5月20⽇日星期⼀一 

• 什么是响应式web设计 • 响应式实例 • 针对的问题 • 优势 • 响应式实现 13年5月20⽇日星期⼀一 

优势 降低开发、维护、运营成本：只有⼀一套系统 兼容性优势：移动设备尺⼨寸层出不穷、分辨率变化较⼤大， 提前预防 减少操作：减少⽤用户⼿手动缩放、平移 降低学习成本：相对⼀一致的体验 没有重定向问题：mobile web 重定向 提⾼高SEO：只有⼀一个url，避免搜索引擎因重复内容⽽而降低权重 13年5月20⽇日星期⼀一 

响应式实现—设计 移动优先 模块化设计 多个模块排列组合 13年5月20⽇日星期⼀一 

响应式实现—开发 • css3 media query • js window.resize 或渐进增强 • 流体布局/断点 • 流体图⽚片（fluid image）+ cdn不同尺⼨寸图⽚片 • HTML5 本地存储 • 后端UA适配 13年5月20⽇日星期⼀一 

响应式实现—调试 • http://resizemybrowser.com/ ⾃自定义各种分辨率 • http://www.responsinator.com/?url=etao.com mobile&pad效果预览 • http://screenqueri.es/ • MIHTool http://www.iunbug.com/mihtool ipad/iphone调试⼯工具 13年5月20⽇日星期⼀一 

响应式设计是⼀一种⼈人⽂文关怀。 响应式设计不是加分，只是把以前疏忽 的东⻄西加以修正。 响应式实现应该是必备的技术能⼒力。 13年5月20⽇日星期⼀一