《HTML5触摸界面设计与开发》——2.5　响应式的CSS

本节书摘来自异步社区《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）。

https://yqfile.alicdn.com/84db660fe32c72a4a64884f78ee3967a420af9e7.png" >

因为侧边栏最先出现在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都可以在网站上找到。如果你在桌面设备上查看这个页面，你会发现当你调整浏览器窗口大小时，样式会发生变化。