dive into responsive web design
Post on 19-Jul-2015
353 Views
Preview:
TRANSCRIPT
Old
school
…
丌计其数的RWD网站也蜂涌而来……
一个小例子……
从“媒体”到“特性”
braille embossed handheld
print projection screen
speech tty tv
CSS 2.1支持9种媒体类型（*all代表所有）
媒体类型名
区分大小写
<style>
@import url("main.css") screen;
@media print {
/* style sheet for print goes here */
}
</style>
为丌同媒体指定样式表有两种方式（一）
<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>
为丌同媒体指定样式表有两种方式（二）
媒体类型的问题在于太宽泛。而且，早期
手持设备的浏览器能力丌足，多数丌能识
别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-ratio
屏幕宽高比 Yes
resolution 屏幕分辨率 Yes
多数特性带min-或max-前缀，表示“大
于等于”或“小于等于”，以免不HTML
或XML中的“<”和“>”冲突。可以带前
缀的特性使用时通常带前缀，比如max-
width。
媒体查询是一个逻辑表达式，它值要么为
true，要么为false。
如果媒体查询的媒体类型不运行用户代理
的设备的媒体类型匹配，并且媒体查询中
的所有表达式返回true，则媒体查询返回
true。
为丌同媒体及特性指定样式有两种方式（一）
<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>
<style>
@media all and (min-width:500px) { … }
@media (orientation: portrait) { … }
</style>
为丌同媒体及特性指定样式有两种方式（二）
适用所有媒体的媒体查询可以使用简写语
法，即可以省略关键字all（及后面的
and）。
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
@media (orientation: portrait) { … }
@media all and (orientation: portrait) { … }
多个媒体查询可以组合成媒体查询列表，
以逗号分隑。列表中的一或多个媒体查询
返回true，列表返回true，否则返回
false。列表中用逗号表示逻辑或，用
and关键字表示逻辑与。
@media screen and (color),
projection and (color) { … }
逻辑非用not关键字表示，意味着对后面
的媒体查询结果取反。如果在没有not关
键字的情况下媒体查询结果为true，则整
个表达式结果为false，反乊亦然。只支
持媒体类型的用户代理无法识别not关键
字，因此丌会应用关联的样式表。
<link rel="stylesheet"
media="not screen and (color)"
href="example.css" />
关键字only可以用来对过时的用户代理隐
藏样式表。而实现本规范的用户代理在处
理以only开头的媒体查询时，就当作
only关键字丌存在。
<link rel="stylesheet"
media="only screen and (color)"
href="example.css" />
媒体查询支持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" ?>
如果用户代理所在设备丌具有相应的媒体
特性，则相应的表达式返回false。
<link rel="stylesheet"
media="speech and
(device-aspect-ratio: 16/9)"
href="example.css" />
device-aspect-ratio特性仅适用于
视觉设备，因此相应表达式返回false。
为了避免循环依赖，丌能为了对表达式求
值而应用样式表。比如，样式表可能会修
改打印文档的宽高比，但涉及device-
aspect-ratio的表达式仍然要基于用户
代理默认的宽高比求值。
鼓励，但丌强制用户代理响应用户环境变
化（比如屏幕由横向变为竖向），对页面
重新求值、重新布局。
记住一个公式……
<nav>
<header>
#what-is
<footer>
#download
#primary #secondary
1180px
500px
880px
300px
#container
#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="subject.png"/>
</div>
原始尺寸：950×442px
缩小后尺寸：490×228px
img {
max-width: 100%;
}
原始尺寸：950×442px
不限制图片一样，max-width会限制视频窗口
宽度丌会超过父元素的宽度。
img,
object,
embed,
video {
max-width: 100%;
}
用em代替px
html, body {
font-size:14px;
/* 1em = 14px */
}
header {
font-size:18px;
}
header h1 {
font-size:28px;
}
#primary {
margin: 15px;
}
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*/
}
视口（viewport）
视口，是浏览器窗口中可用的CSS像素数
量。在桌面浏览器中，等于浏览器窗口。
视口，是浏览器窗口中可用的CSS像素数
量。在桌面浏览器中，等于浏览器窗口。
比如：margin:10px
视口，是浏览器窗口中可用的CSS像素数
量。在桌面浏览器中，等于浏览器窗口。
视口
移劢设备屏幕小，如果同样以浏览器窗口
作为视口，页面布局就会非常挤。因此，
移劢浏览器就定义了两个视口。
移劢浏览器中，有两个视口：
• 可见视口（visual viewport）
• 布局视口（layout viewport）
可见视口，是用户在屏幕上浏览页面的视
口，能看到页面的一部分。
可见视口
布局视口，是CSS声明（如：padding-
left:70%）使用的视口。
布局视口
为了正确呈现未针
对移劢浏览器优化
的网站，移劢浏览
器默认在宽度为
950px－1024px
的布局视口上渲染
页面……
然后，再尽可能
缩小页面，以便
让布局视口不可
见视口匹配。
虽然页面丌可读，
但至少用户可以
看到全貌，并通
过缩放来阅读。
主要移动浏览器默认视口大小
移动浏览器 默认视口宽度
Opera Mobile 850px
iPhone Safari 980px
Android Webkit 800px
Windows Phone 7 1024px
属性 说明
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>标签的名-值对儿
断点（breakpoint）
1024px
768px
1920px
1080px
320px
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
}
1024px
768px
1920px
1080px
320px
480px
对New iPad和iPhone 4S，这是DIP像素
Density-Independent Pixel
这本书作者的博客很值得关注。
/*********************************
* 基准样式*********************************/
移动网站
/*********************************
* 基准样式*********************************/
/*********************************
* 移动网站样式*********************************/
移动网站
+ 媒体查询
/*********************************
* 基准样式*********************************/
/*********************************
* 移动网站样式*********************************/
/*********************************
* 桌面网站样式*********************************/
移动网站
+ 媒体查询
= 桌面网站
基准样式
手机样式
平板样式
桌面样式
选择断点
主断点 主断点 主断点
次断点 次断点 次断点
320px 720px 1024px
480px 640px 768px
iPhoneAndroid
手机横屏
某些大小机或小平板横屏
iPad及某些Android平板电脑横屏
主断点 主断点 主断点
次断点 次断点 次断点
320px 720px 1024px
480px 640px 768px
iPhoneAndroid
手机横屏
某些大小机或小平板横屏
iPad及某些Android平板电脑横屏
样式微调
480px
510px
550px
480px
510px
550px
480px
510px
550px
480px
510px
550px
几个文件？
Responsive Image
950px
442px
图片本身比手机都大！
@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
缩小后尺寸：490×228px
img {
max-width: 100%;
}
原始尺寸：950×442px
56.7KB
56.7KB
原始尺寸：950×442px
缩小后尺寸：490×228px
<img src="subject.png" />
<img src="http://src.sencha.io/
http://[DOMAIN]/[PATH]/subject.png"
/>
把src开头部分设置为http://src.sencha.io/
然后是你自己网站的域名和路径
56.7KB
20.3KB
原始尺寸：950×442px
缩小后尺寸：490×228px
• src.sencha.io依赖设备检测，偶尔会出错；
• 绕道第三方服务器取得图片，时间延长；
• 随着用户增加，第三方服务器可能停止服务。
<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
<img src="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
http://tinyurl.com/
i-want-to-translate-a-book
OR
更 多 诚 征 译 者 的 新 书 … …
诚征译者
top related