本节书摘来自异步社区《HTML5触摸界面设计与开发》一书中的第2章，第2.5节,作者： 【美】Stephen Woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.5 响应式的CSS
在本书的配套网站，touch-interfaces.com上，你可以下载两个CSS文件：
Eric Meyer的reset.css文件。里面有几个用于“重置”的CSS样式。我强烈推荐使用它，因为从“重置”后完全清洁的环境开始，要优于不停地尝试修改兼容浏览器默认的样式。
样式表（birds.css）是加州鸟类网站专有的。birds.css由桌面版样式开始。你可能会认出这是一个非常简单的两栏流动布局。桌面版的内容区域是流动的，而包含导航按钮的侧边栏是固定的。
代码清单 2.3展示了这些基本的样式。
代码清单2.3 基本样式
html {
background: #fff;
color: #000;
}
a {
color: green;
text-decoration: none;
}
p {
margin-bottom: 10px;
}
h2 {
font-size: 20px;
margin: 4px;
}
i {
font-style: italic;
}
.container {
padding: 0 50px;
}
.bd {
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif ;
}
.hero-img {
max-width: 100%;
}
.nav-li {
display: inline-block;
background: #5e49ff;
border: 3px solid #8a7bfd;
width: 120px;
margin-bottom: 10px;
}
.nav-li .nav-link {
color: #fff;
padding: 4px;
}
.header {
width: 100%;
height: 60px;
background: #000;
padding: 0;
font-size: 38px;
font-weight: bold;
}
.header .title{
color: #fff;
padding: 10px;
text-align: left;
}
/* Allow the image to grow proportionally inside its container */
.hero-shot {
width: 50%;
float: left;
margin-right: 10px;
}
.sidebar {
position: absolute;
padding: 10px;
top: 60px;
width: 150px;
}
.main {
margin: 10px 10px 10px 150px;
}
.footer {
width: 100%;
}
你可能会注意到，海鸥图像设置的max-width为100%，而封闭的容器（.hero-shot）具有相对宽度1。这是创建所谓响应式图像的最简单方式。也就是说，图像会自动按比例缩放到容器（即.hero-shot）的宽度。在这种情况下图像的宽度总是文本块的宽度的一半。
这种响应式图像技术有一个重大的缺点：用户的设备肯定要下载多余的字节。在下一章中，我们将重新审视图像的问题。
2.5.1 创建分界点
正如前面提到的，我们将在加州鸟类网站的移动版和桌面版中使用相同的HTML标记。设计上是基于这一点的，布局和设计都会调整，以适应用户的设备的大小。为此，我们可以创建分界点：宽度的像素值不同会触发样式的更改，来适应不同宽度的屏幕。对于加州鸟类网站，我们将创建两个分界点：平板电脑为800px，手机为480px。
也就是说，如果屏幕宽度是801px或以上，我们将应用样式表中的默认样式。我们将为屏幕宽度在481px到800px之间的平板电脑创建特殊的样式，为屏幕宽度为480px或更窄的手机创建额外的样式。
如果你以前从未这样做过，改变样式以适应屏幕宽度的想法听起来很可怕。值得庆幸的是，媒体查询（media queries）使人们可以创造出一个能自适应的样式，而不必使用JavaScript。
媒体查询
由于CSS2已被广泛的支持，开发者已经能够通过在link标签上设置不同的媒体查询值，来为不同的多媒体设备提供不同的样式表。通常情况下这个值都被用于规定一个单独的“打印”样式表，例如：
<!-- this stylesheet is for the screen -->
<link rel="stylesheet" media="screen" href="styles.css">
<!-- This stylesheet is for printing -->
<link rel="stylesheet" media="print" href="print-styles.css">
CSS3提供了更强大的语法，让你可以根据更多的条件过滤样式表，而不是只能根据媒体类型来过滤。媒体查询由一个媒介类型和其他表达式组成。解析后，媒体查询最终的结果是真或假。如果为真，则应用样式表。
媒体查询可以由一个布尔运算符开始。用“not”开始的话，会将字段最后解析出的结果取反，就像在JavaScript中使用“!”一样。最常见的，你可以用only操作符来开始。由于旧的浏览器无法解析only操作符，就可以有效地在旧浏览器上屏蔽掉只应用于现代浏览器的样式表。
接下来就是媒体类型了。在CSS 2.1规范中，有十个媒体类型，但只有print和screen被各浏览器广泛支持。在媒体类型后面，你可以指定一个表达式。对于加州鸟类网站，我们将根据屏幕宽度来改变样式。宽度特征可以采用任何有效的CSS单位（用任何CSS单位来指定）来达到过滤的目的。
例如，下面这条规则限制只有比较窄的屏幕才可应用该样式表：
<link rel="stylesheet" media="only screen and (max-width: 480px)"
→ href="phone-styles.css">
下面这条规则限制只有比较宽的屏幕才可应用该样式表：
<link rel="stylesheet" media="only screen and (min-width: 2000px)"
→ href="phone-styles.css">
对于加州鸟类网站，我们用媒体查询来定义不同分支。因此，有三个样式表：
<link rel="stylesheet" media="screen" href="birds.css">
<link rel="stylesheet" media="only screen and (max-width: 800px)"
→ href="tablet.css">
<link rel="stylesheet" media="only screen and (max-width: 480px)"
→ href="phone.css">
这里的像素值基于浏览器的报告。例如，在高清屏iPhone的垂直方向上，就媒体查询而言，宽度返回的是320，而不考虑屏幕上的实际物理像素。
注：本章仅讲述了媒体查询的一些皮毛。可查阅Mozilla开发网络了解详细的语法解释（https://developer.mozilla.org/en-us/docs/Css/Media_queries）。另外，还可以在mediaqueri.es找到一些例子。
媒体查询真正伟大之处在于，我们不仅能通过外部的媒体属性使用它，还可以在样式表内部中通过@media指令使用它。
@media only screen and (max-width: 800px) {
/* css that applies only in this case */
}
这个语法与媒体查询参数的语法是相同的。@media指令在大括号之间创建了一块区域。括号内的CSS只在规则返回true时被应用，否则浏览器将不理会里面的CSS。
2.5.2 创建额外样式
对于加州鸟类网站，我们会为宽度800px的浏览器和宽度480px的浏览器制作额外的样式。设计师又为平板电脑创造了另一个样式图，将导航移动到了顶部中间，以留出更多空间给正文。否则，样式应该是一样的（图2.6）。
因为侧边栏最先出现在DOM树中，我们只需通过给它设置相对位置（postion:relative）和自动宽度（width:auto）就可以将它放回文件流。然后就可以给container少许内边距（padding），如代码清单2.4所示。
代码清单2.4 平板电脑的样式
.container {
padding: 0 10px;
}
.nav-li {
width: auto; /* so all
the text fits */
}
.sidebar {
position:relative; /* back in the flow */
top: 0;
width: auto;
padding: 0;
text-align: center;
}
.header .title {
text-align: center;
}
.main {
margin: 0;
}
桌面用户可以改变他的浏览器的大小，当桌面用户调整浏览器大小时，会发现随着调整到不同的宽度，可能会看到应用于手机和平板电脑的样式。如果你想让这些样式只适用于设备的物理宽度，可以使用max-device-width 或 min-device-width属性来设置。
正如你所看到的，样式通常伴随着媒体查询。手机版的样式如图2.2所示，它需要一个稍微不同的布局。代码清单2.5列出了手机版的样式。
代码清单2.5 手机版的样式
.container {
padding: 0;
}
.main {
margin: 0;
}
.content {
margin: 10px 10px;
}
.nav-li {
font-size: 12px;
}
.hero-shot {
float: none;
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.header .title {
font-size: 24px;
text-align: left;
}
.hero-shot .caption {
position: absolute;
bottom: 5px;
margin: 0;
}
.hero-shot .caption, .hero-shot .caption a {
color: #000;
color: rgba(255,255,255,0.5);
}
}
完整的代码和代码清单2.5都可以在网站上找到。如果你在桌面设备上查看这个页面，你会发现当你调整浏览器窗口大小时，样式会发生变化。
