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
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
180
Node.js 2025: What's new and what's next
ruyadorno
0
390
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
16k
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
180
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
410
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
230
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
このままAIが発展するだけでAGI達成可能な理由
frievea
0
120
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
200
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
220
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Designing for Performance
lara
610
69k
Fireside Chat
paigeccino
40
3.7k
Raft: Consensus for Rubyists
vanstee
140
7.1k
GitHub's CSS Performance
jonrohan
1032
470k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
How GitHub (no longer) Works
holman
315
140k
A Tale of Four Properties
chriscoyier
161
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
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]