HTML5与CSS3学习笔记【第十二章 构建响应式网站】

---

12.1.响应式 Web 设计：概述

以前，为了满足移动用户的需求，需要额外建立一个专门为移动设备设计的网站。

不久之前这种做法还比较流行，但是目前已经越来越少见了。不过，现在也还有一些公司在这样做。有的还为平板电脑建立了第三个网站。

不存在可以适应所有情形的某种正确方法。每周都有新的设备投放到市场上，而且毋庸置疑的是，各家公司都在设计新的设备类型。那么，构建和维护多个网站现实吗？甚至说，有必要吗？我们无法预知未来的情形。

幸好，我们有办法构建一个既可以运行在现在的设备，也可以运行在未来设备上的网站。更棒的是，可以让它在较小的屏幕、较大的屏幕以及介于两者之间的屏幕上显示不同的效果。

响应式页面的组成
Ethan Marcotte 为我们提供了如何实现上述效果的蓝图，并将相应的方法命名为响应式 Web 设计他的方法植根于以下三点。

• 灵活的图像和媒体。图像和媒体资源的尺寸是用百分数定义的，从而可以
  根据环境进行缩放。
• 灵活的、基于网格的布局，也就是流式布局。对于响应式网站，所有的
  width 属性都用百分数设定，因此所有的布局成分都是相对的。其他水平属性通常也会使用相对单位（em、百分数和 rem 等）。媒体查询。使用这项技术，可以根据媒体特征（如浏览器可视页面区域的宽度）对设计进行调整。

12.2.创建可伸缩图像

默认情况下，图像显示的尺寸是 HTML 中指定的 width 和height 属性值。如果不指定这些属性值，图像就会自动按照其原始尺寸显示。此外，你还可以通过 CSS 以像素为单位设置 width 和 height。显然，当屏幕宽度有限的时候，按原始尺寸显示图像就不一定合适了。使用可伸缩图像技术，就可以让图像在可用空间内缩放，但不会超过其本来的宽度。可用空间是由包含图像的元素决定的（参见最后一条提示）。可用空间是由 body 元素决定的。
制作可伸缩图像的步骤
(1) 对任何想做成可伸缩图像的图像，在HTML 的 img 标签中省略 width 和 height 属性。
(2) 在样式表中，为每个想做成可伸缩图像的图像应用 max-width: 100%。

12.3.创建弹性布局网格

拥有定宽容器的网页显得有些死板。前一章创建的例子就是这样。如果桌面浏览器的宽度小于页面宽度，就会出现横向滚动条。

移动浏览器会显示完整的宽度，但页面会显得特别小，这并不太友好。这对响应式页面来说并不合适。我们希望页面能进行缩放，并正好适应浏览器视觉区域大小，就像可伸缩图像一样。流式布局（又称弹性布局）便可以做到这一点。一旦掌握了弹性布局方法，创建弹性布局就很容易了。创建弹性布局需要使用百分数宽度，并将它们应用于页面里的主要区域。

那么我们如何知道需要使用多大的百分数呢？实际上，元素的百分数宽度基于其父元素（即包含该元素的容器）提供的可用空间。这些说法似乎有些熟悉？这是因为创建弹性布局的原理与创建可伸缩图像的原理是相同的。可以使用下面的公式计算需要使用的百分数：

要指定的宽度（以像素为单位）／容器宽度（以像素为单位）＝值
这与 Ethan Marcotte 的公式（目标／环境＝值）是一致的，只是解释得更为明了。如果创建了定宽布局，那么就将它们带到公式里算一下。

1. 一个真实的例子
让我们考虑一个简单的页面布局。我将演示如何算出main 的 width 为 62.5%。使用公式，不难得出：要指定的宽度（600px）／容器宽度（960px）＝值（.625）然后将值转化为百分数（将小数点向右移动两位），得到 62.5%。将这个数值作为width 的值。完成！

如果你对这一数字还是感到困惑，我会详细解释。布局最宽为 960 像素，这是由 .page的样式规则确定的。如果不对 main 的父元素 .container div 指定宽度，其宽度就自动为 960 像素。（.container div 的父元素是 .page div。）

如果我希望 main 的宽度最多占据 960像素中的 600 像素。使用先前给出的公式，600/960=0.625。使用百分数，则为 62.5%。 对 .sidebar 也可以使用同样的方法，只不过我希望其宽度不超过 300 像素。因此使用300/960 计 算， 得 0.3125， 即 31.25%。结合使用可伸缩图像和弹性布局，便可以让整个页面变得可以缩放

2. 创建弹性布局的步骤
对于需要某个宽度实现预期布局的元素，设 置 width: percentage;， 其 中 percentage表示你希望元素在水平方向上占据容器空间的比例。通常说来，不必设置 width: 100%;，因为默认设置为 display: block; 的元素（如 p 以及其他很多元素）或手动设置为 display: block; 的元素在默认情况下会占据整个可用空间。作为可选的一步，对包含整个页面内容的元素设置 max-width: value;，其中 value表示你希望页面最多可增长到的最大宽度。通常，value 以像素为单位，不过也可以使用百分数、em 值或其他单位的值。

12.4.理解和实现媒体查询

我们之前学习过，可以使用两种方式针对特定的媒体类型定位 CSS。（还有第三种方式，即使用 @import 规则，我们不讨论这种方法，因为它会影响性能。）回顾一下，第一种方式是使用 link 元素的 media属性，位于 head 内。第二种方式是在样式表中使用 @media 规则。

媒体查询增强了媒体类型方法，允许根据特定的设备特性定位样式。要调整网站的呈现样式，让其适应不同的屏幕尺寸，采用媒体查询特别方便。下面列出了可以包含在媒体查询里的媒体特性。

• width（宽度）
• height（高度）
• device-width（设备宽度）
• device-height（设备高度）
• orientation（方向）
• aspect-ratio（高宽比）
• device-aspect-ratio（设备高宽比）
• color（颜色）
• color-index（颜色数）
• monochrome（单色）
• resolution（分辨率）
• scan（扫描）
• grid（栅格）

还有一些非标准的媒体特性，如-webkit-device-pixel-ratio（WebKit设备像素比）-moz-device-pixel-ratio（Mozilla设备像素比）除 了 orientation、scan 和 grid 以 外，上述属性均可添加 min- 和 max- 前缀。min-前缀定位的是“大于等于”对应值的目标，而 max- 前缀定位的则是“小于等于”对应值的目标。
1. 媒体查询语法和示例
Peter Gasston 的 The Book of CSS3（NoStarch Press，2011）一书写得很棒。该书对媒体查询的语法做了很好的归纳。以下是媒体查询的基本语法。

• 指向外部样式表的链接：

<link rel="stylesheet" media="logic
➝ type and (feature: value)"
➝ href="your-stylesheet.css" />

• 位于样式表中的媒体查询：

@media logic type and (feature:
➝ value) {
 /* 目标CSS样式规则写在这里 */
}