学习响应式设计——1.2　简史

在学习响应式设计是如何产生的之前，了解一点网页设计的历史是有帮助的。 1.2.1　固定宽度设计 几年以前，网站是被设计成固定宽度的，以便很好地适配最常见尺寸的台式机和笔记本的屏幕。在2000 年，这意味着设计的屏幕宽度是800 像素（一个像素是屏幕上一个彩色发光的小点），到2005 年前后，大多数显示器是1024 像素宽。 尽管大多数显示器通常就是那几种固定的尺寸，但市场上还存在一些更宽的显示器，也有些老式的窄屏显示器仍在使用。网页设计师希望他们的设计在所有显示器上看起来都完全相同，所以他们通常会设计一个固定宽度的网站以适应最常见的显示器尺寸，如960 像素宽的网站在1024 像素宽的屏幕上无疑是适合的。在更大的屏幕上，网站则会简单地以空区域（设计术语为空白）来填充两边的额外空间，如图1-4 所示。 图1-4： 固定宽度的MSN 站点在任何尺寸的屏幕上都是相同的宽度，当屏幕比站点宽时两边会留出空白 这种固定宽度的设计如今仍是相当普遍的。 流动设计（fluid design）和流式布局（liquid layout）的想法在21 世纪初吸引了不少注意力。这些技术所采用的基于百分比的宽度使得设计的网页能以流式方式适应屏幕的宽度。因此它可以充分利用大屏幕的可用空间。尽管这在理论上听起来不错，但这种放弃对宽度控制的设计最终意味着，在宽屏幕上网站将变得超级宽而且栏目分得非常开，这令大多数Web 设计师仍然坚持使用更容易处理的固定宽度的设计。 1.2.2　移动Web浏览 手机首次能访问因特网是在20 世纪90 年代中期，它们通常并不具备显示实际网站的能力，而只能显示文本数据，比如天气预报、股票报告和比赛得分。最初的移动浏览器只能显示基本的HTML 格式，且通常是黑白而不是彩色。直到2005 年左右，在更先进的称为智能手机的设备上（比如图1-5 中所示的iPhone），移动浏览器才能够显示使用了CSS2 和JavaScript 技术的“真正的”网页。 图1-5：iPhone 4S 2007 年发布的iPhone 改变了游戏规则。它有一个漂亮的界面，可以利用当时所有的Web技术显示网页，如它们在全尺寸显示器上所显示的一样。 虽然触屏设备已经存在多年，但iPhone 是第一个采用多点触控技术的移动设备，能同时识别屏幕上的多个触点——这对我们现在习以为常的诸如捏合以缩放等浏览行为来说是必不可少的。 所有这一切令iPhone 不断被评为那一年最具革命性的产品之一，但仍有一个问题存在。网页是设计来在全尺寸显示器上而不是在小手机上浏览的，因此几乎所有网页都是960 像素或者更宽。另一方面，iPhone 的屏幕只有320 像素宽。苹果的解决方案是自动收缩网页以适应屏幕的浏览区域（视口），然后允许用户通过双击或捏合手势缩放页面的任何区域。 但一次只能浏览页面的一小块无法产生好的用户体验。 网页设计师知道，这对于使用网络的人们来说不是一个最佳方式，他们需要找到一种方法使得网页能更容易地在iPhone 的小屏幕上浏览。 1.2.3　移动网站 因为设计师习惯于制作固定宽度的网页，所以最简单明了的解决方案是制作单独的移动版网站（具有一个固定的页面宽度，适配320 像素宽的屏幕，而不是常见的1024 像素宽的显示器），如图1-6 所示。 图1-6：华盛顿邮报网站的桌面版和手机版 如果用户使用的是手机，通常会被自动重定向到移动版网站。否则，可以通过点击一个链接来选择去移动版网站，或者通过一个不同的URL 访问移动版网站，通常使用m 子域名（比如http://m.sprint.com）。这种做法使得这些单独的移动版网站被称为m-dot 网站。 当然，这对Web 团队意味着额外的工作，但他们通常会简化这项工作，把移动版网站做成标准网站的精简版：只具有一小部分内容，如图1-6 所示。 他们的理由是：手机只是在“四处奔走”或某些基本活动中才使用。这在当时对大多数用户来说可能是对的。但随着手机越来越普及，人们开始使用这些设备来执行越来越多的任务，而他们之前仅在台式机或笔记本电脑上执行这些任务。 1.2.4　更多的设备 做一个“iPhone 网站”，他们如是说。起初，在iPhone 是智能手机市场仅有的霸主玩家时，这种方式很好。但没多久，其他手机公司很快紧跟潮流，推出它们的产品以应对iPhone。但这些新的智能手机并非都拥有相同的尺寸。相对于iPhone 的320 像素宽度，许多拥有更窄的屏幕（240 像素或更少），另一些则拥有比iPhone 更宽的屏幕（特别是那些被设计成水平握持而不是垂直握持的设备）。320 像素宽的iPhone 版网站并不能很好地适应那些屏幕。 因此网页设计师开始尝试寻找一种解决方案：我们怎么制作一个网站，使其能用于所有尺寸的屏幕？这没有简单的答案。10 ｜ 第1 章到了2010 年，苹果发布了iPad，再一次改变了游戏规则。移动版网站太小，不能充分利用iPad 更大的屏幕空间，但桌面尺寸固定宽度的网站对于以纵向模式浏览的iPad 来说又显得太大了。 尽管有些设计师的反应是创建单独的iPad 网站（现在他们已经有三个独立的网站了），但大多数人意识到，随着越来越多的各色尺寸的设备上市，为每一种可能的屏幕尺寸创建单独的网站不再是一项可持续下去的工作。 1.2.5　媒体查询 网页设计社区重拾流式布局的理念，使用基于百分比的宽度，并设法让其成为一种适用于小型移动设备的解决方案。 使用百分比而不是像素使得网页及页面各部分都能够自动改变宽度来适应任意屏幕尺寸，因此也就很容易地消除了相似尺寸设备之间的差异。但是一旦你纵观所有的设备，就会有这样一个问题。如果要缩窄三栏的布局以应用于智能手机的屏幕宽度，那么各栏中的文本会变得窄而长，难以阅读。同样，单栏布局在智能手机屏幕上看起来是蛮好的，但要想在桌面显示器上轻松阅读则显得太宽了。 本质上，这个问题是：不创建多个单独的站点，如何使一个网站能够在窄屏上以单栏显示，而在大屏上以多栏显示？如何根据浏览网站的设备的特性来要求浏览器变换网页的布局？ 媒体查询登场。 CSS 的@media 规则允许你根据设备特性而显示不同的CSS 样式，这实际上在十多年前的CSS2 中就有了，但当时它只支持查询媒体的类型，比如屏幕（screen）或打印（print）。这通常只能用于为网站设计创建一个打印版（可能包含的变化也仅仅是去除背景色，以免浪费打印机墨水）。 直到CSS3 对媒体查询制定了规范（即关于某事必须怎样做的一个正式详尽的描述），才能够基于媒体（设备）的宽度、高度和色彩性能等特性执行更精确的查询。媒体查询不影响HTML（页面之下的实际内容和结构），只影响使用CSS 后应用到页面的样式。浏览器在2009 年前后开始支持CSS3 媒体查询。 媒体查询可以做什么呢？ 举个基本的例子，假设我们有一个网站，有两块各自独立的内容。我们可以创建一个很适合智能手机的单栏设计，以垂直堆叠的方式显示两块内容。而在更宽的屏幕上，我们可能想要以并排的两栏来显示这两块内容。 使用媒体查询，我们可以询问设备屏幕有多宽，然后告诉浏览器仅在屏幕具有足够宽度时，才以两栏来显示内容。 要用代码来实现这种效果，我们在开始只是用CSS 将内容显示在一栏中，然后再添加一条CSS 媒体查询，询问屏幕宽度是否大于等于40 em（你将在第4 章中了解em，40 em 的宽度略窄于一台常见的平板电脑，但你可以在媒体查询中指定任一宽度）。 之后我们会在这条媒体查询中添加CSS 样式将内容显示在两栏中。浏览器仅在该媒体查询结果为真时（即如果屏幕宽度大于等于40 em）才使用此CSS 样式。如果屏幕宽度小于40em，它会忽略此CSS 样式，内容保持在一栏中。 因此，我们可以针对不同的屏幕尺寸使网站变换为不同的布局，而无需创建单独的网站。 通过使用媒体查询，我们可以随心所欲地改变网站的样式，不仅仅是栏数。媒体查询可以移动内容，改变文字的大小，隐藏或显示内容块，调整边距和空白，以及调整其他的CSS样式。 ［ 小贴士］ 在这一节中，我提到了询问设备屏幕宽度的媒体查询。实际上，在响应式设计中常见的媒体查询是询问设备的视口宽度，而不是屏幕宽度。视口是屏幕上（浏览器窗口中）显示网站的区域。 在台式电脑上，你可以改变浏览器窗口的大小，因此，窗口并不总是屏幕的最大宽度。媒体查询会检测浏览器窗口内的空间，所以如果你改变了浏览器窗口的大小，你的视口也会发生变化。在移动设备上，你无法改变窗口的大小，所以屏幕和视口总是相同的宽度。 尽管正确的术语应该是视口宽度，但你仍会经常听到人们在谈论媒体查询和响应式设计时说到屏幕宽度。从技术上讲他们说得并不正确，他们很可能指的是视口宽度（正如我在本书中所做的，除非我明确指出）。 还有其他的媒体查询，可以检测设备屏幕的实际宽度而不是视口宽度，但在目前它们并不常用。 1.2.6　灵活性 媒体查询可以重排你的页面布局，但如果没有灵活性做基础，响应式设计将无法工作。 首先，在你的站点中几乎每一种水平度量都需要采用灵活的单位，而不是僵化的像素。这意味着各栏的宽度和其他布局元素将以百分比定义，文本则以一个叫作em 的相对单位来定义。 缩放页面上的图像这一工作有点不同，因为你不一定想让它们按照屏幕的宽度来改变大小，而是希望只要屏幕上有空间，图像就可以显示得足够大以便看清细节。可问题是，依据设备屏幕的大小，并不总是有足够的空间来以全尺寸显示一个图像。你需要确保图像在没有足够空间的情况下不会被截断。在第6 章中，我们将学习一个CSS 技巧来确保图像总是能够与我们放置它的空间相适应。 1.2.7　响应式网页设计 这些思想（媒体查询或灵活性）本身都不是新的或开创性的思想。但在2010 年，网页设计师Ethan Marcotte 琢磨出来一套组合使用这些概念来制作网站的方法，能够自动对不同的屏幕尺寸做出响应。 Marcotte 创造了“响应式网页设计”这个术语，并于2010 年在一篇为A List Apart 撰写的文章（ http://alistapart.com/article/responsive-web-design）中首次提及，随后在2011 年其撰写的Responsive Web Design 一书得到出版（http://www.abookapart.com/products/responsiveweb-design 1）。 注1：中文版参见人民邮电出版社的《移动优先与响应式Web 设计》。