Question

不知道你此刻怎么想，但我热切地渴望开始设计一个响应式网页！我们已经理解了媒体查询的原理，那就让我们试着驾驭它们，看看它们在实际工作中如何发挥作用。而且我正好有用来测试的项目。下面请允许我说点题外话……

我喜欢电影。但是，我常常发现自己和别人的观点不同（或许这就是我日复一日独居一室写代码的原因之一），尤其是关于什么是好电影什么是烂电影。每当奥斯卡奖提名宣布的时候，我经常会有一种强烈的恶心反胃感。我总觉得各种类型的电影都应获得嘉奖。

我打算自己弄一个名叫And the winner isn’t的小网站，网址是http://www.andthewinnerisnt.com/。这里会褒奖那些本应获奖的电影，批评那些（不该获奖却）获奖的电影，这里还有视频剪辑、经典语录、电影海报，以及能证明我没错的在线调查（我知道没必要，但我喜欢）。

2.3.1　我们的设计是固定宽度的，不要惊讶

和我以前骂过的那些从不考虑不同视口的平面设计师一样，我开始也基于960像素的固定宽度网格制作一个界面原型。虽然理论上最好是从移动（小屏幕）设备的体验出发开始设计，然后渐进增强，但实际上要让每个人都理解这种思路的好处恐怕还需几年时间。在此之前，更多的可能是要将现有的桌面版网页设计改造成响应式的。既然未来几年我们可能都会这样做，那我们的设计还要从固定宽度着手。下面的截图展示了一个粗略的固定宽度的界面原型：

将这个设计分解，可以看到它有几个简单通用的结构：头部、导航、边栏、内容区和页脚。恐怕你每周都会构建一遍类似的结构吧。

第4章会告诉你为什么应该使用HTML5标签。不过此时我将略过这点，因为我们想急切地检验刚讲的媒体查询技巧。所以我们将使用旧的 HTML 4标签来进行我们的第一次媒体查询试验。使用HTML 4标签编写的没有实际内容的基本页面结构如下所示：

用Photoshop打开设计文档，我们可以看到头部和页脚都是940像素宽（两边各有10像素外边距），而侧边栏和内容区分别占据了220像素和700像素，相应地两边也各自有10像素的外边距。

首先，我们要在CSS中给页面主要的结构模块（头部、导航、侧边栏、内容区和页脚）设置一下样式。在插入重置样式之后，页面的主体CSS代码应该如下所示：

为了说明页面的结构，我在给各个结构模块追加额外内容的同时，还为各个结构模块设置了不同的背景颜色。

重置样式就是一组CSS声明，用来覆盖不同浏览器渲染HTML元素时的各种默认样式。重置样式一般会被加入到主样式文件的开头，用来将各个浏览器的自有默认样式重置成统一表现，确保样式表中后续追加的样式在不同浏览器中有相同的显示效果。世界上没有完美的重置样式，许多开发者都有自己的一套。我在HTML 4页面中使用的重置样式，是在Eric Meyer的原版（http://meyerweb.com/eric/tools/css/reset/）基础上加上了我的一些个人偏好及技巧，这些技巧是我从另外一些天才如Dan Cederholm （http://simplebits.com）的代码里学来的。如果你现在还没用过重置样式，那么强烈建议在你的HTML 4文档开头插入Eric的重置样式。我觉得针对HTML5文档有更好的选择，如normalize.css（http://necolas.github.com/normalize.css/），第4章会详细介绍。

在一个视口大于960像素的浏览器中，页面的基本结构应如下所示：

还有好几种使用CSS制作同样效果的固定宽度左右分栏结构的方法，你肯定有自己偏爱的方法。不过这些方法都普遍存在一个问题，当视口缩减到小于960像素的时候，右侧的内容区就开始被截断。

2.3.2　响应式设计中要保证图片尽可能精简

为了说明上述代码结构的问题，我已经提前参照设计图在CSS中增加了一些装饰性样式。既然要做响应式设计，那我肯定会用最精简的办法来切取背景图片。例如，对于设计图顶部和底部的小彩旗，我不会制作一个长条图片，而只是切取其中的两面小旗。这个切片作为背景图在视口中水平重复，从而给人一种长条旗帜图片的错觉（不论视口有多宽都行）。这种方法为两处背景分别节省了16KB（960像素宽的.png长条旗帜图一张20KB，而精简的切片图只有4KB）。这样你就为通过手机上网的用户节省了一部分流量！下图展示了这个切片图输出前的样子（放大到了600%）：

在背景图片和文字大小都设置停当之后，And the winner isn’t…网站在浏览器中的效果如下所示：

要让样式完美，还有很多工作要做。例如，导航按钮颜色应该交替使用红色和黑色，缺少内容区的THESE SHOULD HAVE WON按钮和侧边栏的full info按钮，字体与设计图效果相去甚远。不过，所有这些问题都可以使用HTML5和CSS3来解决。使用HTML5和CSS3，而不再是简单插入图片（如我们以前做过的那样），会使网站与我们的响应式目标步调一致。时刻谨记，我们要保证代码和数据都尽可能精简，以便为带宽有限的用户提供愉悦的体验。

2.3.3　小视口下的内容剪切

现在，我们把美学问题放在一边，重点关注一下当视口缩减至小于960像素的情况，此时正在制作的首页中会有一部分内容被切掉。

这还只是将视口缩减到673像素宽，想象一下网站在iPhone 3GS等设备上将会有多难看？iPhone 3GS的显示屏大小只有320×480像素。看看下面的效果图：

咦，等等，这效果看着挺好，或者说还行……刚才你还说会难看的！这是因为iOS上的Safari浏览器默认是在980像素宽的画布上渲染页面，然后将画布缩小到与视口大小匹配。虽然得放大页面才能看清楚，但页面内容没有被切掉。怎么阻止Safari或其他移动浏览器做这样的默认处理呢？