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
480
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.7k
Sass带来的变革
w3cplus
2
580
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
370
http协议与缓存简述
w3cplus
5
520
前端自动化工具探索
w3cplus
4
1k
Other Decks in Technology
See All in Technology
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
180
AIのグローバルトレンド 2025 / ai global trend 2025
kyonmm
PRO
1
120
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
150
Claude Codeは仕様駆動の夢を見ない
gotalab555
2
300
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
270
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
8
2k
Kiroから考える AIコーディングツールの潮流
s4yuba
4
660
o11yツールを乗り換えた話
tak0x00
1
120
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
680
Findy Freelance 利用シーン別AI活用例
ness
0
290
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
340
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Pragmatic Product Professional
lauravandoore
36
6.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
4 Signs Your Business is Dying
shpigford
184
22k
Docker and Python
trallard
45
3.5k
The Language of Interfaces
destraynor
158
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
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