学习响应式设计——1.1　一点儿基础

现在，网络世界中的所有人几乎都听说过响应式网页设计（通常称为RWD，即Responsive Web Design 的缩写），但大部分人并没有很好地理解它是什么。 在本章中，你将学习响应式网站的基础知识。之后，我们将简述网页设计的简史，以便你理解响应式设计的思想来自哪里，以及它与旧网页设计方式之间的差异。 我们还会讨论为什么对于制作能很好地工作于不同设备与屏幕尺寸的网站而言，响应式设计通常是最佳选择，以及为何从长远来说它意味着更少的工作。我们也会介绍选择响应式设计的一个不太明显的效果：它对你的搜索引擎排名的影响。 1.1　一点儿基础 如果你拿起本书，是因为你听说过响应式设计，但还不是很明白它到底是什么，本节将帮助你了解响应式设计的基本知识。 即使你有一定的响应式设计经验，也可能觉得很难用通俗的语言向别人解释它。本节将给你一个更好的主意，告诉你如何向用户、客户、非技术团队成员或你的妈妈（她很好奇，想知道你每天在工作中都做些什么）解释响应式设计。 总的来说，响应式设计是一种方法，使网站可以在任何类型的设备和任何尺寸的屏幕上（从最小的手机直至最宽的桌面显示器）轻松浏览和使用。最简单的解释方式是比较响应式网站与非响应式网站，并看看这两种类型的网站在智能手机上的浏览效果。 想象你正使用你的智能手机浏览一个固定宽度的网站，即一个被设计成总是以一个固定的宽度（比如960 个像素）来显示的站点。你将看到整个网站就如同它在你的桌面显示器上显现的一样，但它最初以一个微小的尺寸进行显示，以适应屏幕。你频繁地放大和缩小它，以便阅读文字和浏览网站，如图1-1 所示。这需要许多额外的操作。 图1-1： 在手机上浏览一个固定宽度的网站时，需要放大文本才能看清 有些网站有一个移动版站点，独立于常规的桌面网站。在你的智能手机上浏览此类网站时，它以全尺寸显示（不必进行缩放），但你时常会发现它与你在桌面显示器上浏览的同一网站有很大不同——通常缺失很多内容，网站拥有者因此可以减少维护多个版本网站所产生的额外工作。 此外移动版网站通常是为一个特定尺寸的设备（如iPhone）制作的，因此如果你有一个不同的设备，该网站可能就无法很好地适应屏幕了。单独的移动网站通常是为某一大小的设备所优化的，但是市场上有很多不同的设备，构建一个只能工作于一种设备上的移动网站可能意味着抛弃了所有使用其他不同设备的用户。举一个例子，宜家（IKEA）有一个单独的移动网站，是为某一尺寸的手机优化适配的。在 图1-2 中，上方是宜家桌面站点的导航栏，左下方是该站点在iPad 中的样子，右下方是该站点在iPhone 中的样子。 图1-2： 宜家桌面站点（上方）与你在iPad 上（左下）所看到的是一样的，而iPhone 则显示一个特别的移动网站（右下）三个屏幕截图都是按比例缩小的，你可以比较在不同尺寸屏幕上所看到的内容。在iPhone上浏览的是移动版网站，只显示几个导航链接，但它们与桌面网站上的链接有相似的尺寸大小。而在iPad 上，你浏览的是桌面网站而不是移动版网站，所有内容都被缩得非常小以适应小屏幕。你必须做许多缩放操作来浏览该网站。 宜家公司做了大量工作来创建一个良好的移动网站，但如果你的设备是一台平板电脑，你没法使用它，也不会获得满意的体验。如果宜家有一个响应式网站，就能够保证人们使用任何尺寸的设备都能获得一个合适的界面。 采用响应式设计时，网站仅有一个版本，因此你能浏览全部的内容，且网站会自己重新排列以完美地适配任何尺寸的屏幕，并具有全尺寸文本，那样你就无需进行缩放操作了，如图1-3 所示。 图1-3：在手机、平板及桌面显示器上浏览一个响应式网站 图1-3　（续） 这里有很多技术细节（稍后我们将讨论），但从用户的角度来说，描述一个响应式网站的关键是网页内容可以自动改变大小和移动位置以适配显示它们的屏幕。