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
150
响应式设计
Thinking80s
January 08, 2013
Tweet
Share
More Decks by Thinking80s
See All by Thinking80s
响应式设计案例
dengpeng
0
180
MediaQuery适配
dengpeng
0
200
Other Decks in Programming
See All in Programming
Kiroで始めるAI-DLC
kaonash
2
610
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.2k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
楽して成果を出すためのセルフリソース管理
clipnote
0
180
概念モデル→論理モデルで気をつけていること
sunnyone
3
290
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
Deep Dive into Kotlin Flow
jmatsu
1
360
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fireside Chat
paigeccino
39
3.6k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
How STYLIGHT went responsive
nonsquared
100
5.8k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Into the Great Unknown - MozCon
thekraken
40
2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Documentation Writing (for coders)
carmenintech
74
5k
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