Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
响应式web设计与实现介绍
Search
d2forum
May 20, 2013
8
790
响应式web设计与实现介绍
d2forum
May 20, 2013
Tweet
Share
More Decks by d2forum
See All by d2forum
TMS的PHP特性
d2forum
0
1.6k
Leap Motion体感实战
d2forum
0
1.2k
跨终端产品实践
d2forum
12
1.9k
Touching Future—s01-e01
d2forum
2
890
KissyCake
d2forum
3
750
贡献标准.s01.e02
d2forum
3
1.3k
一淘响应式设计实践
d2forum
10
960
定制版设计开发vs响应式设计开发
d2forum
0
170
定制版设计开发vs响应式设计开发之性能及流量
d2forum
2
410
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
GitHub's CSS Performance
jonrohan
1030
460k
Docker and Python
trallard
44
3.3k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
How STYLIGHT went responsive
nonsquared
99
5.4k
Facilitating Awesome Meetings
lara
53
6.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Transcript
响应式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⽇日星期⼀一