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
640
Responsive设计
Responsive设计的基本概念
w3cplus
November 21, 2012
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
Responsive小试牛刀
w3cplus
3
540
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
380
http协议与缓存简述
w3cplus
5
520
Other Decks in Technology
See All in Technology
20251010_HCCJP_AdaptiveCloudUpdates
sdosamut
0
130
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
1.9k
フレームワークを意識させないワークショップづくり
keigosuda
0
200
コンテキストエンジニアリング入門〜AI Coding Agent作りで学ぶ文脈設計〜
kworkdev
PRO
3
1.4k
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
280
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
860
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
300
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
510
AWS IoT 超入門 2025
hattori
0
340
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
480
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Rails Girls Zürich Keynote
gr2m
95
14k
Building Adaptive Systems
keathley
44
2.8k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Become a Pro
speakerdeck
PRO
29
5.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
How to Ace a Technical Interview
jacobian
280
24k
Making Projects Easy
brettharned
120
6.4k
It's Worth the Effort
3n
187
28k
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]