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
600
Responsive设计
Responsive设计的基本概念
w3cplus
November 21, 2012
Tweet
Share
More Decks by w3cplus
See All by w3cplus
手淘互动动效探索
w3cplus
0
170
CSS Future
w3cplus
2
550
Web Animation
w3cplus
5
430
CSS3带来的变化
w3cplus
0
1.3k
Web重构之道
w3cplus
1
2.6k
Sass带来的变革
w3cplus
2
480
Responsive小试牛刀
w3cplus
3
500
CSS预处器——Sass、LESS和Stylus实践
w3cplus
0
340
http协议与缓存简述
w3cplus
5
490
Other Decks in Technology
See All in Technology
Databricks におけるデータエンジニアリング
databricksjapan
0
370
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
250
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
320
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
DevOpsメトリクスとアウトカムの接続にトライ!開発プロセスを通して計測できるメトリクスの活用方法
ham0215
1
180
o11y入門_外形監視を利用したWebアプリケーションへの最適なモニタリング_TechBrew
k5k
3
100
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
2
2.9k
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.5k
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
530
「共通基盤」を超えよ! 今、Platform Engineeringに取り組むべき理由
jacopen
25
5.8k
Featured
See All Featured
Atom: Resistance is Futile
akmur
258
25k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Typedesign – Prime Four
hannesfritz
36
2k
The Cult of Friendly URLs
andyhume
74
5.7k
Happy Clients
brianwarren
91
6.4k
A Modern Web Designer's Workflow
chriscoyier
689
190k
How GitHub (no longer) Works
holman
304
140k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Debugging Ruby Performance
tmm1
70
11k
Being A Developer After 40
akosma
56
580k
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]