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
November 21, 2012
Technology
2
630
Responsive设计
Responsive设计的基本概念
w3cplus
November 21, 2012
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.8k
Sass带来的变革
w3cplus
2
580
Responsive小试牛刀
w3cplus
3
540
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
380
http协议与缓存简述
w3cplus
5
520
Other Decks in Technology
See All in Technology
AI エージェントとはそもそも何か? - 技術背景から Amazon Bedrock AgentCore での実装まで- / AI Agent Unicorn Day 2025
hariby
3
790
実践AIガバナンス
asei
3
340
2025年になってもまだMySQLが好き
yoku0825
8
3.8k
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
0
130
AIエージェントの活用に重要な「MCP (Model Context Protocol)」とは何か
masayamoriofficial
0
280
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3k
Flutterでキャッチしないエラーはどこに行く
taiju59
0
210
進捗
ydah
2
230
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
3
750
Kubernetes における cgroup driver のしくみ: runwasi の bugfix より
z63d
2
130
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
190
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
7
2.3k
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Statistics for Hackers
jakevdp
799
220k
For a Future-Friendly Web
brad_frost
179
9.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Being A Developer After 40
akosma
90
590k
How to Ace a Technical Interview
jacobian
279
23k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
RailsConf 2023
tenderlove
30
1.2k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Code Review Best Practice
trishagee
70
19k
Transcript
Responsive Responsive Responsive Responsive 设计 作者: 大漠 QQ: 81059347 Blog:
http://www.w3cplus.com 新浪微薄:http://weibo.com/w3cplus
Responsive Responsive Responsive Responsive 设计 Responsive是什么?
Responsive Responsive Responsive Responsive 设计 Responsive是流体布局 Responsive是网格布局 Responsive是手机布局
Responsive Responsive Responsive Responsive 设计 Responsive是流体布局 Responsive是网格布局 Responsive是手机布局
Responsive Responsive Responsive Responsive 设计 Responsive是 灵活的布局 适合各种设备的布局
Responsive Responsive Responsive Responsive 设计 http://www.w3cplus.com/css3/media-queries-alistpart http://www.w3cplus.com/css3/media-queries-alistpart http://www.w3cplus.com/css3/media-queries-alistpart http://www.w3cplus.com/css3/media-queries-alistpart http://www.alistapart.com/d/responsive-web-
http://www.alistapart.com/d/responsive-web- http://www.alistapart.com/d/responsive-web- http://www.alistapart.com/d/responsive-web- design/ex/ex-site-FINAL.html design/ex/ex-site-FINAL.html design/ex/ex-site-FINAL.html design/ex/ex-site-FINAL.html
Responsive Responsive Responsive Responsive 设计 http://www.w3cplus.com/css3/media-queries- http://www.w3cplus.com/css3/media-queries- http://www.w3cplus.com/css3/media-queries- http://www.w3cplus.com/css3/media-queries- hicksdesign
hicksdesign hicksdesign hicksdesign http://hicksdesign.co.uk/ http://hicksdesign.co.uk/ http://hicksdesign.co.uk/ http://hicksdesign.co.uk/
Responsive Responsive Responsive Responsive 设计 http://www.w3cplus.com/css3/media-queries-tee- http://www.w3cplus.com/css3/media-queries-tee- http://www.w3cplus.com/css3/media-queries-tee- http://www.w3cplus.com/css3/media-queries-tee- gallery
gallery gallery gallery http://teegallery.com http://teegallery.com http://teegallery.com http://teegallery.com
Responsive Responsive Responsive Responsive 设计 如何做?
Responsive Responsive Responsive Responsive 设计 简单的布局
Responsive Responsive Responsive Responsive 设计 CSS3 Media Queries http://www.w3cplus.com/content/css3-media-queries
Responsive Responsive Responsive Responsive 设计 @media only screen and (min-device-width
: 320px) and (max-device-width : 480px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices Smartphones (portrait and landscape)
Responsive Responsive Responsive Responsive 设计 @media only screen and (min-width
: 321px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices Smartphones (landscape)
Responsive Responsive Responsive Responsive 设计 @media only screen and (max-width
: 320px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices Smartphones (portrait)
Responsive Responsive Responsive Responsive 设计 @media only screen and (min-device-width
: 768px) and (max-device-width : 1024px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices iPads (portrait and landscape)
Responsive Responsive Responsive Responsive 设计 @media only screen and (min-device-width
: 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices iPads (landscape)
Responsive Responsive Responsive Responsive 设计 @media only screen and (min-device-width
: 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices iPads (portrait)
Responsive Responsive Responsive Responsive 设计 @media only screen and (-webkit-min-device-
pixel-ratio : 1.5),only screen and (min-device- pixel-ratio : 1.5) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices iPhone 4
Responsive Responsive Responsive Responsive 设计 @media screen and (max-width :
640px) { /* CSS Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices 640px显屏
Responsive Responsive Responsive Responsive 设计 @media screen and (max-width :
800px) { /* CSS Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices 800px显屏
Responsive Responsive Responsive Responsive 设计 @media screen and (max-width :
1024px) { /* CSS Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices 1024显屏
Responsive Responsive Responsive Responsive 设计 @media only screen and (min-width
: 1224px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices Desktops and laptops
Responsive Responsive Responsive Responsive 设计 @media only screen and (min-width
: 1824px) { /* Styles */ } http://www.w3cplus.com/css3/css3-media-queries-for-different- devices Large screens
Responsive Responsive Responsive Responsive 设计
Responsive Responsive Responsive Responsive 设计
Responsive Responsive Responsive Responsive 设计 Min-* && Max-*
Responsive Responsive Responsive Responsive 设计 断点的选择
Responsive Responsive Responsive Responsive 设计
Responsive Responsive Responsive Responsive 设计
Responsive Responsive Responsive Responsive 设计 流体布局
Responsive Responsive Responsive Responsive 设计 我们怎么布局?
Responsive Responsive Responsive Responsive 设计 给一个 流体容器
Responsive Responsive Responsive Responsive 设计 添加反方向 浮动
Responsive Responsive Responsive Responsive 设计 三列布局 2 2 2 2列嵌套法
Responsive Responsive Responsive Responsive 设计 相对值
Responsive Responsive Responsive Responsive 设计 确定嵌套宽度 你想要的 宽度 父元素的 宽度
= 嵌套列的 宽度
Responsive Responsive Responsive Responsive 设计 计算嵌套宽度 你想要的 宽度 父元素的 宽度
= 嵌套列的 宽度 目标 内容 = 结果
Responsive Responsive Responsive Responsive 设计 计算嵌套宽度 你想要的 宽度 父元素的 宽度
= 嵌套列的 宽度 目标 内容 = 结果 20 80 = 0.25 25%
Responsive Responsive Responsive Responsive 设计 是你想要的?
Responsive Responsive Responsive Responsive 设计 间距是?
Responsive Responsive Responsive Responsive 设计 容器撑破了怎么办? *{ -webkit-box-sizing: border-box; -moz-box-sizing:
border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
Responsive Responsive Responsive Responsive 设计 图片怎么自适应? img { max-width: 100%;
}
Responsive Responsive Responsive Responsive 设计 图片怎么自适应? <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-
800px="image-800px.jpg" alt=""> @media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); } } @media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); } }
Responsive Responsive Responsive Responsive 设计 移动端上的效果
Responsive Responsive Responsive Responsive 设计 Viewport
Responsive Responsive Responsive Responsive 设计 Viewport < meta name="viewport" content="width=device-width">
Responsive Responsive Responsive Responsive 设计 Q && A
网名:大漠,W3cplus创始人,现居上海,从事 Web前端和手游工作,对HTML5、CSS3、移动端、 前端框架抱有浓厚兴趣。现正在编写《 css3精解: CSS3核心技术与Bootstrap使用详解》一书。 Blog: http://www.w3cplus.com QQ: 81059347 QQ交流群:
1041263 新浪微薄: http://weibo.com/w3cplus E-mail:
[email protected]