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
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
110
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
140
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
220
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
380
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
320
新世界の理解
koriym
0
130
Vibe coding コードレビュー
kinopeee
0
420
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
Scale out your Claude Code ~自社専用Agentで10xする開発プロセス~
yukukotani
8
1.5k
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
350
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Navigating Team Friction
lara
188
15k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Designing Experiences People Love
moore
142
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
4 Signs Your Business is Dying
shpigford
184
22k
Bash Introduction
62gerente
614
210k
Designing for Performance
lara
610
69k
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