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
Responsive小试牛刀
Search
w3cplus
March 22, 2013
Technology
3
540
Responsive小试牛刀
Responsive小试牛刀
w3cplus
March 22, 2013
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
210
CSS Future
w3cplus
2
610
Web Animation
w3cplus
5
470
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.7k
Sass带来的变革
w3cplus
2
570
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
370
http协议与缓存简述
w3cplus
5
510
前端自动化工具探索
w3cplus
4
1k
Other Decks in Technology
See All in Technology
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.7k
OPENLOGI Company Profile for engineer
hr01
1
34k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
440
ゼロからはじめる採用広報
yutadayo
3
920
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
510
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
110
MobileActOsaka_250704.pdf
akaitadaaki
0
120
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
7.6k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
RailsConf 2023
tenderlove
30
1.1k
Why Our Code Smells
bkeepers
PRO
336
57k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Facilitating Awesome Meetings
lara
54
6.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Bash Introduction
62gerente
613
210k
Designing for humans not robots
tammielis
253
25k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Transcript
Responsive之小试牛刀 作者:different(D姐),前端工程师 博客:http://www.w3cplus.com 新浪微博:inline_block
提纲 Viewport浅谈 Fluid img处理 响应式布局 响应式布局面临的几个问题
1、viewport <meta name="viewport" content="width=device-width, initial-scale=1.0"> 1.什么是viewport 2.他的由来,有什么作用 3.桌面浏览器的viewport跟移动viewport的区别 4.扩展知识
1.4 扩展知识 1.css像素与设备物理像素的区别 http://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is- not-a-pixel.html 2.viewport相关内容链接,详见 http://www.w3cplus.com/css/advanced-html-css-lesson4- responsive-web-design.html#viewport http://developer.apple.com/library/safari/#documentation/A ppleApplications/Reference/SafariWebContent/UsingtheVi
ewport/UsingtheViewport.html https://developer.mozilla.org/enUS/docs/Mobile/Viewport_ meta_tag
2、Fluid img处理 1.通常处理img{max-width:100%;} 2.需要注意的地方 3.IE6兼容 参考:http://alistapart.com/article/fluid-images http://demosthenes.info/blog/586/CSS-Fluid-Image- Techniques-for-Responsive-Site-Design http://www.adobe.com/devnet/dreamweaver/articles/introdu cing-media-queries-pt2.html
AlphaImageLoader使得ie6透明的微软css过滤 .logo { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoade r» (src="/path/to/logo.png", sizingMethod="scale");
} 2.3、IE6兼容
3、响应式布局 1.设计布局 2.结构布局——grid
3.1、响应式设计布局 参考: http://www.lukew.com/ff/entry.asp?1514 http://speckyboy.com/2012/02/29/40-examples-of-brilliant-responsive- website-layouts/ http://www.w3cplus.com/source/responsive-resources-design-layout.html
3.2、响应式结构布局 参考:http://www.columnal.com/demo/ http://responsive.gs/ http://www.responsivegridsystem.com/ http://www.w3cplus.com/resource/tags/259.html http://www.w3cplus.com/css3/responsive-design-with-css3-media- queries http://www.w3cplus.com/content/css3-media-queries 1.Grid 2.Media
Queries
4、响应式布局面临的几个问题 1.Fluid img 2.Fluid 其他媒体元素 3.导航处理
4.2、Fluid 其他媒体元素 1.流式媒体 2. iframe和嵌入媒体
4.3、导航处理 参考:http://www.w3cplus.com/source/20-useful- responsive-menu-navigation-tutorials.html http://www.w3cplus.com/css3/responsive-mobile- navigation-menumethod s-and-solutions.html
5、Q&A 谢谢 作者:different (D姐) 博客:http://www.w3cplus.com 新浪微博:inline_block