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
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
120
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Design Foundational Data Engineering Observability
sucitw
3
200
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
Swift Updates - Learn Languages 2025
koher
2
490
概念モデル→論理モデルで気をつけていること
sunnyone
2
280
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
470
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
Docker and Python
trallard
46
3.6k
Balancing Empowerment & Direction
lara
3
620
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Unsuck your backbone
ammeep
671
58k
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