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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
w3cplus
March 22, 2013
Technology
570
3
Share
Responsive小试牛刀
Responsive小试牛刀
w3cplus
March 22, 2013
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
250
CSS Future
w3cplus
2
650
Web Animation
w3cplus
5
510
CSS3带来的变化
w3cplus
0
1.5k
Web重构之道
w3cplus
1
2.9k
Sass带来的变革
w3cplus
2
630
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
400
http协议与缓存简述
w3cplus
5
540
前端自动化工具探索
w3cplus
4
1.1k
Other Decks in Technology
See All in Technology
鹿野さんに聞く!CSSの最新トレンド Ver.2026
tonkotsuboy_com
3
190
AI時代に越境し、 組織を変えるQAスキルの正体 / QA Skills for Transforming an Organization
mii3king
5
3.9k
「QA=テスト」「シフトレフト=スクラムイベントの参加者の一員」の呪縛を解く。アジャイルな開発を止めないために、10Xで挑んだ「右側のしわ寄せ」解消記 #scrumniigata
nihonbuson
PRO
3
860
コミュニティ・勉強会を作るのは目的じゃない
ohmori_yusuke
0
290
自動テストだけで リリース判断できるチームへ - 鍵はテストの量ではなくリリース判断基準の再設計にあった / Redesigning Release Criteria for Lightweight Releases
ewa
7
3.4k
AI駆動開発で生産性を追いかけたら、行き着いたのは品質とシフトレフトだった
littlehands
0
390
Google Cloud Next '26 の裏でこっそりリリースされたCloud Number Registry & Cloud Hub コスト分析 を試してみた
hikaru1001
0
160
Building a Study Buddy AI Agent from Scratch: From Passive Chatbots to Autonomous Systems
itchimonji
0
140
カオナビに Suspenseを導入するまで / The Road to Suspense at kaonavi
kaonavi
1
420
[Scram Fest Niigata2026]Quality as Code〜AIにQAの思考を再現させる試み〜
masamiyajiri
1
240
アクセシビリティはすべての人のもの
tomokusaba
0
270
変化の激しい時代をゴキゲンに生き抜くために 〜ストレスマネジメントのススメ〜
kakehashi
PRO
4
1.1k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
183
10k
Code Reviewing Like a Champion
maltzj
528
40k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
510
[SF Ruby Conf 2025] Rails X
palkan
2
1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.3k
Navigating Weather and Climate Data
rabernat
0
180
Reality Check: Gamification 10 Years Later
codingconduct
0
2.1k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.8k
Site-Speed That Sticks
csswizardry
13
1.2k
Information Architects: The Missing Link in Design Systems
soysaucechin
0
910
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
180
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