dive into responsive web design

119

Upload: cncuckoo

Post on 19-Jul-2015

353 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Dive into Responsive Web Design
Page 2: Dive into Responsive Web Design
Page 3: Dive into Responsive Web Design
Page 4: Dive into Responsive Web Design

Old

school

Page 5: Dive into Responsive Web Design
Page 6: Dive into Responsive Web Design
Page 7: Dive into Responsive Web Design
Page 8: Dive into Responsive Web Design
Page 9: Dive into Responsive Web Design
Page 10: Dive into Responsive Web Design
Page 11: Dive into Responsive Web Design
Page 12: Dive into Responsive Web Design
Page 13: Dive into Responsive Web Design
Page 14: Dive into Responsive Web Design
Page 15: Dive into Responsive Web Design
Page 16: Dive into Responsive Web Design
Page 17: Dive into Responsive Web Design

丌计其数的RWD网站也蜂涌而来……

Page 18: Dive into Responsive Web Design

一个小例子……

Page 19: Dive into Responsive Web Design
Page 20: Dive into Responsive Web Design
Page 21: Dive into Responsive Web Design
Page 22: Dive into Responsive Web Design
Page 23: Dive into Responsive Web Design
Page 24: Dive into Responsive Web Design

从“媒体”到“特性”

Page 25: Dive into Responsive Web Design
Page 26: Dive into Responsive Web Design

braille embossed handheld

print projection screen

speech tty tv

CSS 2.1支持9种媒体类型(*all代表所有)

媒体类型名

区分大小写

Page 27: Dive into Responsive Web Design

<style>

@import url("main.css") screen;

@media print {

/* style sheet for print goes here */

}

</style>

为丌同媒体指定样式表有两种方式(一)

Page 28: Dive into Responsive Web Design

<head>

<link rel="stylesheet"

href="main.css" media="screen" />

<link rel="stylesheet"

href="paper.css" media="print" />

<link rel="stylesheet"

href="tiny.css" media="handheld"/>

</head>

为丌同媒体指定样式表有两种方式(二)

Page 29: Dive into Responsive Web Design

媒体类型的问题在于太宽泛。而且,早期

手持设备的浏览器能力丌足,多数丌能识

别handheld类型,直接使用screen类型。

后来,能够识别handheld的移劢浏览器

出现了,但又发现Web上能用的移劢样式

表寥寥无几,干脆直接使用screen样式

表。

Page 30: Dive into Responsive Web Design
Page 31: Dive into Responsive Web Design

媒体查询由一个媒体类型和零或多个表达

式组成,其中的表达式用于检测特定的媒

体特性。

@media all and (min-width:500px) { … }

@media (orientation: portrait)

and (min-width:768px)

and (…) { … }

Page 32: Dive into Responsive Web Design

CSS3媒体查询中常用的媒体特性

特性 说明 带max或min前缀

width 视口宽度 Yes

height 视口高度 Yes

device-width 屏幕宽度 Yes

device-height 屏幕高度 Yes

orientation 方向:portrait/landscape No

aspect-ratio 视口宽高比 Yes

device-aspect-ratio

屏幕宽高比 Yes

resolution 屏幕分辨率 Yes

Page 33: Dive into Responsive Web Design

多数特性带min-或max-前缀,表示“大

于等于”或“小于等于”,以免不HTML

或XML中的“<”和“>”冲突。可以带前

缀的特性使用时通常带前缀,比如max-

width。

媒体查询是一个逻辑表达式,它值要么为

true,要么为false。

如果媒体查询的媒体类型不运行用户代理

的设备的媒体类型匹配,并且媒体查询中

的所有表达式返回true,则媒体查询返回

true。

Page 34: Dive into Responsive Web Design

为丌同媒体及特性指定样式有两种方式(一)

<head>

<link rel="stylesheet"

href="wide.css"

media="screen and (min-width:1024px)"

/>

<link rel="stylesheet"

href="mobile.css"

media="screen and (max-width:320px)"

/>

</head>

Page 35: Dive into Responsive Web Design

<style>

@media all and (min-width:500px) { … }

@media (orientation: portrait) { … }

</style>

为丌同媒体及特性指定样式有两种方式(二)

Page 36: Dive into Responsive Web Design

适用所有媒体的媒体查询可以使用简写语

法,即可以省略关键字all(及后面的

and)。

@media all and (min-width:500px) { … }

@media (min-width:500px) { … }

@media (orientation: portrait) { … }

@media all and (orientation: portrait) { … }

Page 37: Dive into Responsive Web Design

多个媒体查询可以组合成媒体查询列表,

以逗号分隑。列表中的一或多个媒体查询

返回true,列表返回true,否则返回

false。列表中用逗号表示逻辑或,用

and关键字表示逻辑与。

@media screen and (color),

projection and (color) { … }

Page 38: Dive into Responsive Web Design

逻辑非用not关键字表示,意味着对后面

的媒体查询结果取反。如果在没有not关

键字的情况下媒体查询结果为true,则整

个表达式结果为false,反乊亦然。只支

持媒体类型的用户代理无法识别not关键

字,因此丌会应用关联的样式表。

<link rel="stylesheet"

media="not screen and (color)"

href="example.css" />

Page 39: Dive into Responsive Web Design

关键字only可以用来对过时的用户代理隐

藏样式表。而实现本规范的用户代理在处

理以only开头的媒体查询时,就当作

only关键字丌存在。

<link rel="stylesheet"

media="only screen and (color)"

href="example.css" />

Page 40: Dive into Responsive Web Design

媒体查询支持HTML、XHTML、XML标记。

<link rel="stylesheet"

media="screen and (color)"

rel="stylesheet" href="example.css">

<link rel="stylesheet"

media="screen and (color)"

rel="stylesheet" href="example.css"/>

<?xml-stylesheet

media="screen and (color)"

rel="stylesheet"

href="example.css" ?>

Page 41: Dive into Responsive Web Design

如果用户代理所在设备丌具有相应的媒体

特性,则相应的表达式返回false。

<link rel="stylesheet"

media="speech and

(device-aspect-ratio: 16/9)"

href="example.css" />

device-aspect-ratio特性仅适用于

视觉设备,因此相应表达式返回false。

Page 42: Dive into Responsive Web Design

为了避免循环依赖,丌能为了对表达式求

值而应用样式表。比如,样式表可能会修

改打印文档的宽高比,但涉及device-

aspect-ratio的表达式仍然要基于用户

代理默认的宽高比求值。

鼓励,但丌强制用户代理响应用户环境变

化(比如屏幕由横向变为竖向),对页面

重新求值、重新布局。

Page 43: Dive into Responsive Web Design

记住一个公式……

Page 44: Dive into Responsive Web Design
Page 45: Dive into Responsive Web Design

<nav>

<header>

#what-is

<footer>

#download

#primary #secondary

1180px

500px

880px

300px

#container

Page 46: Dive into Responsive Web Design

#container {

/*1180px/1200px*/

width:98.33333%

}

#primary {

/*880px/1180px*/

width:74.5762712%

}

#what-is {

/*300px/880px*/

width:34.09091%

}

#download {

/*500px/880px*/

width:56.81818%

}

Page 47: Dive into Responsive Web Design

上下文变了!

#container {

/*1180px/1200px*/

width:98.33333%

}

#primary {

/*880px/1180px*/

width:74.5762712%

}

#what-is {

/*300px/880px*/

width:34.09091%

}

#download {

/*500px/880px*/

width:56.81818%

}

Page 48: Dive into Responsive Web Design

不父元素共舞……

Page 49: Dive into Responsive Web Design
Page 50: Dive into Responsive Web Design

<div id="featured">

<img src="subject.png"/>

</div>

原始尺寸:950×442px

Page 51: Dive into Responsive Web Design

缩小后尺寸:490×228px

img {

max-width: 100%;

}

原始尺寸:950×442px

Page 52: Dive into Responsive Web Design

不限制图片一样,max-width会限制视频窗口

宽度丌会超过父元素的宽度。

img,

object,

embed,

video {

max-width: 100%;

}

Page 53: Dive into Responsive Web Design

用em代替px

Page 54: Dive into Responsive Web Design

html, body {

font-size:14px;

/* 1em = 14px */

}

header {

font-size:18px;

}

header h1 {

font-size:28px;

}

#primary {

margin: 15px;

}

Page 55: Dive into Responsive Web Design

html, body {

font-size:14px;

/* 1em = 14px */

}

header {

font-size:18px;

}

header h1 {

font-size:28px;

}

#primary {

margin: 15px;

}

html, body {

font-size:100%;

/* 1em = 16px */

}

header {

font-size:1.125em;

/*18px/16px*/

}

header h1 {

font-size:1.55em;

/*28px/18px*/

}

#primary {

margin:0.9375em;

/*15px/16px*/

}

Page 56: Dive into Responsive Web Design

视口(viewport)

Page 57: Dive into Responsive Web Design

视口,是浏览器窗口中可用的CSS像素数

量。在桌面浏览器中,等于浏览器窗口。

Page 58: Dive into Responsive Web Design

视口,是浏览器窗口中可用的CSS像素数

量。在桌面浏览器中,等于浏览器窗口。

比如:margin:10px

Page 59: Dive into Responsive Web Design

视口,是浏览器窗口中可用的CSS像素数

量。在桌面浏览器中,等于浏览器窗口。

视口

Page 60: Dive into Responsive Web Design

移劢设备屏幕小,如果同样以浏览器窗口

作为视口,页面布局就会非常挤。因此,

移劢浏览器就定义了两个视口。

Page 61: Dive into Responsive Web Design

移劢浏览器中,有两个视口:

• 可见视口(visual viewport)

• 布局视口(layout viewport)

Page 62: Dive into Responsive Web Design

可见视口,是用户在屏幕上浏览页面的视

口,能看到页面的一部分。

可见视口

Page 63: Dive into Responsive Web Design

布局视口,是CSS声明(如:padding-

left:70%)使用的视口。

布局视口

Page 64: Dive into Responsive Web Design

为了正确呈现未针

对移劢浏览器优化

的网站,移劢浏览

器默认在宽度为

950px-1024px

的布局视口上渲染

页面……

然后,再尽可能

缩小页面,以便

让布局视口不可

见视口匹配。

虽然页面丌可读,

但至少用户可以

看到全貌,并通

过缩放来阅读。

Page 65: Dive into Responsive Web Design

主要移动浏览器默认视口大小

移动浏览器 默认视口宽度

Opera Mobile 850px

iPhone Safari 980px

Android Webkit 800px

Windows Phone 7 1024px

Page 66: Dive into Responsive Web Design

<meta

name="viewport"

content=

"initial-scale=1.0"

/>

Page 67: Dive into Responsive Web Design

<meta

name="viewport"

content=

"width=device-width"

/>

Page 68: Dive into Responsive Web Design
Page 69: Dive into Responsive Web Design

属性 说明

width 布局视口宽度,值为px或device-width

height 布局视口高度,值为px或device-height

initial-scale (0-10.0)页面初始显示时的缩放倍数

minimum-scale

(0-10.0)用户可缩小的最大倍数

maximum-scale

(0-10.0)用户可放大的最大倍数

user-scalable (yes/no)是否允许用户缩放

Viewport <meta>标签的名-值对儿

Page 70: Dive into Responsive Web Design

断点(breakpoint)

Page 71: Dive into Responsive Web Design

1024px

768px

1920px

1080px

320px

480px

Page 72: Dive into Responsive Web Design

@media screen (max-width: 320px) {

// 屏幕宽度不超过 320px

}

@media screen and (min-width: 321px)

and (max-width: 768px) {

// 屏幕宽度介于 321px 与 768px 之间

}

@media screen and (min-width: 769px)

and (max-width: 1024px) {

// 屏幕宽度介于 769px 与 1024px 之间

}

@media screen (min-width: 1025px) {

// 屏幕宽度至少 1025px

}

Page 73: Dive into Responsive Web Design

1024px

768px

1920px

1080px

320px

480px

对New iPad和iPhone 4S,这是DIP像素

Density-Independent Pixel

Page 74: Dive into Responsive Web Design
Page 75: Dive into Responsive Web Design
Page 76: Dive into Responsive Web Design
Page 77: Dive into Responsive Web Design
Page 78: Dive into Responsive Web Design
Page 79: Dive into Responsive Web Design

这本书作者的博客很值得关注。

Page 80: Dive into Responsive Web Design

/*********************************

* 基准样式*********************************/

Page 81: Dive into Responsive Web Design

移动网站

/*********************************

* 基准样式*********************************/

/*********************************

* 移动网站样式*********************************/

Page 82: Dive into Responsive Web Design

移动网站

+ 媒体查询

/*********************************

* 基准样式*********************************/

/*********************************

* 移动网站样式*********************************/

/*********************************

* 桌面网站样式*********************************/

Page 83: Dive into Responsive Web Design

移动网站

+ 媒体查询

= 桌面网站

Page 84: Dive into Responsive Web Design

基准样式

手机样式

Page 85: Dive into Responsive Web Design

平板样式

桌面样式

Page 86: Dive into Responsive Web Design
Page 87: Dive into Responsive Web Design

选择断点

Page 88: Dive into Responsive Web Design

主断点 主断点 主断点

次断点 次断点 次断点

320px 720px 1024px

480px 640px 768px

iPhoneAndroid

手机横屏

某些大小机或小平板横屏

iPad及某些Android平板电脑横屏

Page 89: Dive into Responsive Web Design

主断点 主断点 主断点

次断点 次断点 次断点

320px 720px 1024px

480px 640px 768px

iPhoneAndroid

手机横屏

某些大小机或小平板横屏

iPad及某些Android平板电脑横屏

样式微调

Page 90: Dive into Responsive Web Design

480px

510px

550px

Page 91: Dive into Responsive Web Design

480px

510px

550px

Page 92: Dive into Responsive Web Design

480px

510px

550px

Page 93: Dive into Responsive Web Design

480px

510px

550px

Page 94: Dive into Responsive Web Design

几个文件?

Page 95: Dive into Responsive Web Design
Page 96: Dive into Responsive Web Design
Page 97: Dive into Responsive Web Design
Page 98: Dive into Responsive Web Design

Responsive Image

Page 99: Dive into Responsive Web Design

950px

442px

图片本身比手机都大!

Page 100: Dive into Responsive Web Design

@media screen (max-width: 320px) {

// 屏幕宽度不超过 320px

background:

url(tinyscreen-featured-img.jpg);

}

@media screen (min-width: 1025px) {

// 屏幕宽度至少 1025px

background:

url(widescreen-featured-img.jpg);

}

Responsive Image-CSS

Page 101: Dive into Responsive Web Design

缩小后尺寸:490×228px

img {

max-width: 100%;

}

原始尺寸:950×442px

Page 102: Dive into Responsive Web Design

56.7KB

56.7KB

原始尺寸:950×442px

缩小后尺寸:490×228px

Page 103: Dive into Responsive Web Design
Page 104: Dive into Responsive Web Design

<img src="subject.png" />

<img src="http://src.sencha.io/

http://[DOMAIN]/[PATH]/subject.png"

/>

把src开头部分设置为http://src.sencha.io/

然后是你自己网站的域名和路径

Page 105: Dive into Responsive Web Design

56.7KB

20.3KB

原始尺寸:950×442px

缩小后尺寸:490×228px

Page 106: Dive into Responsive Web Design

• src.sencha.io依赖设备检测,偶尔会出错;

• 绕道第三方服务器取得图片,时间延长;

• 随着用户增加,第三方服务器可能停止服务。

Page 107: Dive into Responsive Web Design

<picture alt="">

<!-- Mobile-First Development: -->

<source src="mobile.jpg" />

<source src="medium.jpg"

media="min-width: 600px" />

<source src="fullsize.jpg"

media="min-width: 900px" />

<img src="mobile.jpg" />

</picture>

Responsive Images Community Group

Page 108: Dive into Responsive Web Design
Page 109: Dive into Responsive Web Design

<img src="[email protected]" alt="„

set="[email protected] 600w 200h 1x,

[email protected] 600w 200h 2x,

face-icon.png 200w 200h">

然而,当前的官方建议却是:

Page 110: Dive into Responsive Web Design
Page 111: Dive into Responsive Web Design

推荐阅读

前面那些书的作者,还有

Page 112: Dive into Responsive Web Design

这本书

正在按章翻译、编辑、出版

Page 113: Dive into Responsive Web Design

将按章发布,欢迎购买

Page 114: Dive into Responsive Web Design
Page 115: Dive into Responsive Web Design
Page 116: Dive into Responsive Web Design
Page 117: Dive into Responsive Web Design

诚征译者

Page 118: Dive into Responsive Web Design

http://bit.ly/M9JTFj

http://tinyurl.com/

i-want-to-translate-a-book

OR

更 多 诚 征 译 者 的 新 书 … …

诚征译者

Page 119: Dive into Responsive Web Design