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
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
770
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
820
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
260
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Side Projects
sachag
455
42k
Statistics for Hackers
jakevdp
799
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Producing Creativity
orderedlist
PRO
346
40k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Thoughts on Productivity
jonyablonski
69
4.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
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