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
220
CSS Future
w3cplus
2
620
Web Animation
w3cplus
5
480
CSS3带来的变化
w3cplus
0
1.4k
Web重构之道
w3cplus
1
2.8k
Sass带来的变革
w3cplus
2
590
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
380
http协议与缓存简述
w3cplus
5
520
前端自动化工具探索
w3cplus
4
1k
Other Decks in Technology
See All in Technology
[2025年10月版] Databricks Data + AI Boot Camp
databricksjapan
1
260
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
400
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
170
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
180
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
200
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
290
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
130
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
7
3.3k
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
44k
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
160
Kubernetes self-healing of your workload
hwchiu
0
500
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
210
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Code Review Best Practice
trishagee
72
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Designing for humans not robots
tammielis
254
26k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Six Lessons from altMBA
skipperchong
29
4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Navigating Team Friction
lara
190
15k
Docker and Python
trallard
46
3.6k
Site-Speed That Sticks
csswizardry
13
920
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