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
620
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
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
290
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
150
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
250
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
5
670
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
slog.Handlerのよくある実装ミス
sakiengineer
4
230
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
850
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
230
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
660
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
12
4.8k
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
250
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
What's in a price? How to price your products and services
michaelherold
246
12k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Gamification - CAS2011
davidbonilla
81
5.4k
Documentation Writing (for coders)
carmenintech
74
5k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
How GitHub (no longer) Works
holman
315
140k
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]