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
响应式设计
Search
Thinking80s
January 08, 2013
Programming
0
140
响应式设计
Thinking80s
January 08, 2013
Tweet
Share
More Decks by Thinking80s
See All by Thinking80s
响应式设计案例
dengpeng
0
170
MediaQuery适配
dengpeng
0
88
Other Decks in Programming
See All in Programming
Fast JSX: Don't clone props object #28768
yossydev
1
120
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
840
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
150
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
340
エンターテイメント業界で利用されるAWS
demuyan
0
210
使ってみよう Azure AI Document Intelligence
kosmosebi
2
320
Ruby GitHub Packages
bkuhlmann
0
630
"config" ってなんだ? / What is "config"?
okashoi
0
240
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
305
41k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Rails Girls Zürich Keynote
gr2m
91
13k
Six Lessons from altMBA
skipperchong
21
3k
Making Projects Easy
brettharned
108
5.5k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Adopting Sorbet at Scale
ufuk
68
8.6k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Visualization
eitanlees
136
14k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Clear Off the Table
cherdarchuk
84
310k
Transcript
响应式设计 2013/1/8 1 Email:
[email protected]
响应式设计 可以使网站页面随浏览设备的不同而自行响应,动态的调整布局结构、 元素规格样式,将相同的内容以不同的格式呈现给不同设备的用户 2013/1/8 2
响应式Web设计是一种技术,可以使网站适应于任何设备 2013/1/8 3
实现方式 • 流动布局用百分比来控制页面每列的宽度, 从而实现宽度的自适应 • 弹性布局是css3中的新技术,可以实现自适 应布局 • CSS3 Media
Queries(媒介查询)实现跨设备跨 浏览器的响应式Web设计 2013/1/8 4
流动布局 • 自适应浏览器分辨率,在不同浏览器下都 是相同 2013/1/8 5
弹性布局 • 创建自适应浏览器窗口的流动布局或自适 应字体大小的弹性布局 2013/1/8 6
• 创建多个样式表,以适应不同设备 • 多个样式文件整合在一个样式文件中 *依靠屏幕宽度来进行适配是最简单的方法 Media Queries 2013/1/8 7
设备尺寸 • @media screen and (min-width: ?) 2013/1/8 8
宽度临界点 2013/1/8 9
适配尺寸 2013/1/8 10
图片自适应 • 弹性图片 通过max-width: 100%和height: auto实现图片同比缩放,不必在样式表中为图片设 置宽度和高度,只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩 放 缺点:如果原始图片本身过大,便会显著降低图片文件的下载速度,对存储空间 也会造成没有必要的消耗
• 响应式图片 响应式图片方式根据屏幕尺寸使用不同大小图片,对页面下载速度和存储空间影 响较小 缺点:需要准备多张不同尺寸图片,维护成本高 2013/1/8 11
• 当某些旧设备无法完美支持CSS3的media query时,它可以作为后备支援 • media queries是以纯CSS方式实现响应式 Web设计思路的手段。 JavaScript 2013/1/8 12
参考 • http://www.aliued.cn/2012/09/28/%E5%93% 8D%E5%BA%94%E5%BC%8Fweb%E8%AE%BE %E8%AE%A1.html • http://wenku.baidu.com/view/2dcceddea58d a0116c1749e2 • http://beforweb.com/node/6
• http://www.qianduan.net/responsive-web- design.html • http://ucdchina.com/snap/12450 • http://blog.jobbole.com/30648/ 2013/1/8 13
谢谢 2013/1/8 14