狠狠撸

Dive into Responsive Web Design

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

从“媒体”到“特性”

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

braille embossed handheld

print projection screen
媒体类型名
区分大小写

speech tty tv

为丌同媒体指定样式表有两种方式（一）

<style>

@import url(/slideshow/dive-into-responsive-web-design/13362444/"main.css") screen;
@media print {
/* style sheet for print goes here */
}

</style>

为丌同媒体指定样式表有两种方式（二）

<head>

<link rel="stylesheet"
href=/slideshow/dive-into-responsive-web-design/13362444/"main.css" media="screen" />
href="paper.css" media="print" />
href="tiny.css" media="handheld"/>

</head>

媒体类型的问题在于太宽泛。而且，早期
手持设备的浏览器能力丌足，多数丌能识
别handheld类型，直接使用screen类型。

后来，能够识别handheld的移劢浏览器
出现了，但又发现Web上能用的移劢样式
表寥寥无几，干脆直接使用screen样式
表。

媒体查询由一个媒体类型和零或多个表达
式组成，其中的表达式用于检测特定的媒
体特性。

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

@media (orientation: portrait)
and (min-width:768px)
and (…) { … }

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

特性说明带max或min前缀
width 视口宽度 Yes
height 视口高度 Yes
device-width 屏幕宽度 Yes
device-height 屏幕高度 Yes
orientation 方向：portrait/landscape No
aspect-ratio 视口宽高比 Yes
device-aspect- 屏幕宽高比 Yes
ratio
resolution 屏幕分辨率 Yes

多数特性带尘颈苍-或尘补虫-前缀，表示“大
于等于”或“小于等于”，以免不HTML
或XML中的“<”和“>”冲突。可以带前
缀的特性使用时通常带前缀，比如max-
width。

媒体查询是一个逻辑表达式，它值要么为
true，要么为false。

如果媒体查询的媒体类型不运行用户代理
的设备的媒体类型匹配，并且媒体查询中
的所有表达式返回true，则媒体查询返回
true。

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

<head>

href="wide.css"
media="screen and (min-width:1024px)"
/>
href="mobile.css"
media="screen and (max-width:320px)"
/>

</head>

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

<style>


@media (orientation: portrait) { … }

</style>

适用所有媒体的媒体查询可以使用简写语
法，即可以省略关键字all（及后面的
and）。

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

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

多个媒体查询可以组合成媒体查询列表，
以逗号分隑。列表中的一或多个媒体查询
返回true，列表返回true，否则返回
false。列表中用逗号表示逻辑或，用
and关键字表示逻辑与。

@media screen and (color),
projection and (color) { … }

逻辑非用苍辞迟关键字表示，意味着对后面
的媒体查询结果取反。如果在没有not关
键字的情况下媒体查询结果为true，则整
个表达式结果为false，反乊亦然。只支
持媒体类型的用户代理无法识别not关键
字，因此丌会应用关联的样式表。

media="not screen and (color)"
href="example.css" />

关键字辞苍濒测可以用来对过时的用户代理隐
藏样式表。而实现本规范的用户代理在处
理以only开头的媒体查询时，就当作
only关键字丌存在。

media="only screen and (color)"

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

media="screen and (color)"
rel="stylesheet" href="example.css">

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

<?xml-stylesheet
rel="stylesheet"
href="example.css" ?>

如果用户代理所在设备丌具有相应的媒体
特性，则相应的表达式返回false。

media="speech and
(device-aspect-ratio: 16/9)"

device-aspect-ratio特性仅适用于
视觉设备，因此相应表达式返回false。

为了避免循环依赖，丌能为了对表达式求
值而应用样式表。比如，样式表可能会修
改打印文档的宽高比，但涉及device-
aspect-ratio的表达式仍然要基于用户
代理默认的宽高比求值。

鼓励，但丌强制用户代理响应用户环境变
化（比如屏幕由横向变为竖向），对页面
重新求值、重新布局。

#container
<nav>
<header> #primary #secondary

#what-is #download
300px 500px

880px
<footer>

1180px

#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%
}

#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%
上下文变了！ }

<div id="featured">
<img src=/slideshow/dive-into-responsive-web-design/13362444//slideshow/dive-into-responsive-web-design/13362444/"subject.png"/>
</div>
原始尺寸：950×442辫虫

img {
max-width: 100%;
}
原始尺寸：950×442辫虫缩小后尺寸：490×228px

img,
object,
embed,
video {
max-width: 100%;
}

不限制图片一样，max-width会限制视频窗口
宽度丌会超过父元素的宽度。

html, body {
font-size:14px;
/* 1em = 14px */
}

header {
font-size:18px;
}

header h1 {
font-size:28px;
}

#primary {
margin: 15px;
}

html, body { html, body {
font-size:14px; font-size:100%;
/* 1em = 14px */ /* 1em = 16px */
} }
header {
header { font-size:1.125em;
font-size:18px; /*18px/16px*/
} }

header h1 { header h1 {
font-size:28px; font-size:1.55em;
} /*28px/18px*/
}
#primary { #primary {
margin: 15px; margin:0.9375em;
} /*15px/16px*/
}

视口（惫颈别飞辫辞谤迟）

视口，是浏览器窗口中可用的C S S像素数
量。在桌面浏览器中，等于浏览器窗口。


比如：
margin:10px


视口

移劢设备屏幕小，如果同样以浏览器窗口
作为视口，页面布局就会非常挤。因此，
移劢浏览器就定义了两个视口。

移劢浏览器中，有两个视口：
? 可见视口（ v i s u al v i e w p o r t ）
? 布局视口（ l a y o ut v i e w p o r t ）

可见视口

可见视口，是用户在屏幕上浏览页面的视
口，能看到页面的一部分。

布局视口

布局视口，是CSS声明（如：p ad d in g -
l e f t : 7 0 % ）使用的视口。

为了正确呈现未针
对移劢浏览器优化
的网站，移劢浏览
器默认在宽度为然后，再尽可能
950px－1024px 缩小页面，以便
的布局视口上渲染让布局视口不可
页面…… 见视口匹配。
虽然页面丌可读，
但至少用户可以
看到全貌，并通
过缩放来阅读。

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

移动浏览器默认视口宽度

Opera Mobile 850px
iPhone Safari 980px
Android Webkit 800px
Windows Phone 7 1024px

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

属性说明
width 布局视口宽度，值为px或device-width
height 布局视口高度，值为px或device-height
initial-scale （0-10.0）页面初始显示时的缩放倍数
minimum- （0-10.0）用户可缩小的最大倍数
scale
maximum- （0-10.0）用户可放大的最大倍数
scale
user-scalable （yes/no）是否允许用户缩放

断点（产谤别补办辫辞颈苍迟）

1920px

1080px
1024px

320px

768px
480px

@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
}

Density-Independent Pixel

1920px

1080px
1024px

320px

768px
480px

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

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

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

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

移动网站

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

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

/***
+ 媒体查询 * 桌面网站样式
***/
移动网站

= 桌面网站
+ 媒体查询
移动网站

主断点主断点主断点

次断点次断点次断点

480px 640px 768px

iPhone 某些大 iPad及某
320px 720px 1024px
Android 小机或些Android
手机横小平板平板电脑
屏横屏横屏

主断点样式微调主断点主断点

次断点次断点次断点

480px 640px 768px

iPhone 某些大 iPad及某
320px 720px 1024px
Android 小机或些Android
手机横小平板平板电脑
屏横屏横屏

950px

442px

图片本身比
手机都大！

@media screen (max-width: 320px) {
// 屏幕宽度不超过 320px
background:
url(/slideshow/dive-into-responsive-web-design/13362444/tinyscreen-featured-img.jpg);
}

@media screen (min-width: 1025px) {
// 屏幕宽度至少 1025px
background:
url(/slideshow/dive-into-responsive-web-design/13362444/widescreen-featured-img.jpg);
}
Responsive Image－CSS


56.7KB

缩小后尺寸：490×228px

56.7KB

<img src=/slideshow/dive-into-responsive-web-design/13362444/"subject.png" />
把src开头部分设置为
http://src.sencha.io/

<img src="http://src.sencha.io/
http://[DOMAIN]/[PATH]/subject.png"
/>
然后是你自己网站的
域名和路径


56.7KB

缩小后尺寸：490×228px

20.3KB

? src.sencha.io依赖设备检测，偶尔会出错；
? 绕道第三方服务器取得图片，时间延长；
? 随着用户增加，第叁方服务器可能停止服务。

Responsive Images Community Group
<picture alt="">

<source src=/slideshow/dive-into-responsive-web-design/13362444/"mobile.jpg" />
<source src="medium.jpg"
media="min-width: 600px" />
<source src="fullsize.jpg"
media="min-width: 900px" />
<img src=/slideshow/dive-into-responsive-web-design/13362444/"mobile.jpg" />
</picture>

然而，
当前的官方建议却是：
<img src=/slideshow/dive-into-responsive-web-design/13362444/"face-600-200@1.jpeg" alt="?
set="face-600-200@1.jpeg 600w 200h 1x,
face-600-200@2.jpeg 600w 200h 2x,
face-icon.png 200w 200h">

推荐阅读

前面那些书的作者，还有

这本书

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

将按章发布，欢迎购买

诚征译者

更多诚征译者的新书……

http://bit.ly/M9JTFj
OR
http://tinyurl.com/
i-want-to-translate-a-book

狠狠撸

Dive into Responsive Web Design

Recommended

More Related Content

Viewers also liked (13)

Similar to Dive into Responsive Web Design (20)

Dive into Responsive Web Design