HTML5 和 CSS3 移动优先设计（二）

原文：zh.annas-archive.org/md5/8E3F0E6C99133E9B96FC8EF78A0D3F0F

译者：飞龙

协议：CC BY-NC-SA 4.0

第五章：建立关于我的页面

在上一章中，我们为客户建立了一个联系我们的表单潜力。这只是当前模型的组合中的一部分，无论是个人业务还是其他任何业务用途的投资组合网站。这个约定的最后一个方面是“关于我”页面。这可能是我经常看到的最不重要的页面，我经常不得不与在他们的网站这一角落做一些相当奇怪的事情的客户进行咨询。也就是说，我认为这通常是出于好意的。

但在我们回到设计和编码之前，我想提出关于“关于我”页面的赞成和反对的观点。

证明“关于我”页面的必要性

每个人都希望他们的网站能够实现看似两种相互冲突的目标，这些目标如下：

• 目标 1：我们是专业人士。这是我们的工作和我们的业绩。我们与我们的竞争对手不同。

• 目标 2：我们只是普通人！我和你一样！我们的血液在流动，就像你一样！

所以，从修辞学的角度来说，这其实是有道理的，对吧？你想要与你的观众建立情感联系。这在修辞学的研究中被称为感情。如果你没有建立情感联系，获得客户或销售的可能性肯定会减少。但是，信不信由你，我真的很享受与人交流，听他们的经历，我真的很享受帮助他们解决问题。此外，我发现以一种传达我的温暖和人性的方式（无论是通过网络还是其他任何方式）进行交流是令人满意的（希望我对这一点是正确的）。我可以在做这件事的同时赚钱，这真是太棒了。

我并不是一个罕见的品种。尽管有一些愚蠢的刻板印象，我发现网页开发人员是非常社交的人，也喜欢技术。那么，为什么我们制作的软件中缺乏个性和人情味呢？不知道。但我在这里要为更多的个性辩护。作为任何技术的用户，任何被设计来承认我的人性和我生活的实际状况的东西都会让我感到高兴。它们可以给你带来一刻愉悦或深刻的满足体验。

所有这些都是为了说“关于我”页面是一个很好的地方来为自己（无论是个人还是集体）提供光明，但这只是与观众建立联系的一种策略。但是，如果在到达“关于我”页面之前你还没有与你的观众建立联系，在当前的用语中，“你做错了”。如果你的客户要求你这样做，你还是做错了。对我来说，给网站注入正确的语气以及使网站真正可用是很重要的。对于投资组合网站来说，这是非常容易被欺骗的，因为惯例已经相当成熟。对于这本书，我们只是利用惯例快速制作了“关于我”页面。但最终，这只是一个框架。你需要有创意，而不要过度，通过为你的网站添加令人惊讶的东西，或者可能只是一个令人难忘的惊喜。希望使用一个快速、简单的框架能给你更多的时间和大脑空间来做这些。我对框架的最大担忧是，它们促进了几乎无法区分的网站的快速制作。

所以，我的真正观点是，确实有一个“关于我”页面，做得好，但也要确保整个网站也是关于你的。这需要更多的工作，也存在风险，但我认为最终是值得的。另一件事是，这本书并不真正涉及这个问题；我不打算教你如何创建“关于我”页面，尽管这是本章的主要内容。这确实值得一整本书来关注，更不用说一本不那么技术性的书了。所以我提前道歉，这一章主要是关于如何布置这个页面的。

话虽如此，让我们开始设计这个页面。我们将在这个页面上需要的内容类型非常简单。它将包括以下内容：

• 关于我们将要提供的服务的一些细节。

• 公司成员的照片。对于这种情况，我们将假设数量不多，但包括处理更多数量的策略。显然，如果只有你一个人，你只需要一张照片。让它很好；一些简介的文字，既简洁又有意义。

制作线框图

让我们来看看这个页面的一些线框图。在这些示例中，我将假设这是一个个人作品集网站。但如果你有一个小团队，你可能会想重新考虑这个布局。我们稍后会讨论更多。现在，这是移动视图的线框图。首先是页面的顶部部分（在标语牌下面，这将保持一致）：

请注意，我们列出并堆叠了三项服务。我们将使用一组包含的图标来制作大的、引人注目的图标，放在每个服务/技能描述的左侧。在图标下面，我们将放上必不可少的头像和简介：

现在我们将如何在更宽的桌面布局上使用相同的内容：

我们将使用此页面的更宽布局将一些内容放在侧边栏上。这样做的好处是让用户在不滚动的情况下看到更多内容。

标记

让我们从这个页面的标记开始。这个页面将面临一个特殊的技术挑战，因为 320 and Up 没有提供制作这种侧边栏的方法，也不是真的打算这样做。其他框架如 Bootstrap 和 Foundation 有这样的功能。不过我们将自己解决这个问题。没有必要引入整个框架来解决这个单一问题。话虽如此，我将从这些框架如何解决这个问题中汲取灵感。

为了解决这个问题，让我们从移动布局的一些相当基本的标记开始。首先，让我们添加另一个标语牌（不过不要流泪；在将来你可以做任意多个）。

<!--hero markup -->
<div class="hero subhead">
  <div class="container">
    <h1>Let's Talk About Me.</h1>
    <p>Read on to learn about my special powers.</p>
  </div>
</div>
<!--end hero markup -->

希望到目前为止这一切都是有意义的。现在让我们为主要区域添加我们的第一部分标记，描述我们所提供的所有内容。我们知道我们需要以下内容：

• 一个包装器，用于所有内容，这样我们可以根据不同的屏幕宽度对页面内容进行填充和设置宽度

• 主要内容和侧边栏内容的包装器，出于与前一点相似的原因

• 各种容器和所有实际内容的标记

所以让我们开始吧。让我们在标语牌下面放上这个标记：

<!--main content -->
<div class="full summary">
  <div class="main-content">
    <div class="content-item">
      <div class="circle pull-left">
        <i class="icon-fire big-icon"></i>
      </div>
      <div class="content-body">
        <h4 class="content-heading">Startup Igniter</h4>
        <p>Umami kogi placeat trust fund. Officia ethnic esse laboris umami commodo. Eiusmod single-origin coffee occupy.</p>
    </div>
  </div> <!--end content-item -->
  <div class="content-item">
    <div class="circle pull-left">
      <i class="icon-leaf big-icon"></i>
    </div>
    <div class="content-body">
      <h4 class="content-heading">Code Grower</h4>
      <p>Umami kogi placeat trust fund. Officia ethnic esse laboris umami commodo. Eiusmod single-origin coffee occupy.</p>
    </div>
  </div><!--end content-item -->
  <div class="content-item">
    <div class="circle pull-left">
      <i class="icon-lemon big-icon"></i>
    </div>
    <div class="content-body">
      <h4 class="content-heading">Lemonade Maker</h4>
      <p>Umami kogi placeat trust fund. Officia ethnic esse laboris umami commodo. Eiusmod single-origin coffee occupy.</p>
    </div>
  </div><!--end content-item -->
</div>
  <div class="sidebar-content">

  </div>
</div>
<!--end main content -->

我们重新使用了.full类，该类在所有主要内容上应用相同的样式，主要是填充和边距。我也创建了许多新类。现在它们还没有样式，但在我继续并为它们添加样式之前，让我解释一下我的想法。

在.full之后的下一个容器是.main-content容器。在移动视图中它不会做太多事情，但随着布局变得更宽，我们将为其分配一个大小并浮动它，以便有空间将.sidebar-container浮动到右侧（剧透）。

在.main-content容器内，我们将有三个内容块，包括一个图标、一个标题和一些文字。我给每个块都加上了.content-item类。在这个类内部，有一个div标签，我将把它改成一个圆圈（至少对于现代浏览器来说），用来装饰图标。接着是content-body div类，它将包含一个标题和我想描述的特殊能力的简短介绍。根据需要重复使用content-items类，但我喜欢三个一组。三毕竟是一个神奇的数字。

请注意，我使用了框架中的icon类。它们使用font-awesome字体。它们非常容易实现，并且在我们开始对它们进行样式设置时，您将看到它们非常灵活。要使它们出现在您的标记中，您只需要向您的标记添加相应的类。我将这些类添加到<i>标记中，这是一种约定，但只要标记有意义，您也可以在<span>标记、<a>标记或其他标记上使用它们。您会注意到我还在每个图标上添加了.big-icon类。这是因为我预计我将需要一个额外的样式来使这些图标变大，并为更大的布局添加一些其他样式。接下来，让我们利用 320 和 Up 附带的图标字体集。

令人敬畏的图标字体

以后参考一下_font-awesome.scss（或类似的）文件，您会看到所有图标的列表，这些图标是通过样式创建的，以便使用font-awesome图标字体。这些对我们来说只是预先准备的，但如果您需要一个已添加到font-awesome的新图标，您需要将其添加到此列表中（或者自己创建一个列表）。您会注意到图标实际上是用content属性指定的。例如，柠檬图标的 CSS 如下所示：

. icon-lemon:before              { content: "\f094"; }

这是因为图标是用 Unicode 字符F094指定的。您可以在fortawesome.github.io/Font-Awesome/icons/上查找。只需单击每个图标，了解一些关于每个图标的更多信息。

我们在这里的时候，让我们快速看一下支持这些图标字体的其他内容。在_font-awesome.scss表的顶部，您会看到任何以icon-开头的类都会默认获得一些样式。这是用以下样式指定的：

[class^="icon-"],
[class*=" icon-"] {
display : inline;
width : auto;
height : auto;
line-height : inherit;
vertical-align : baseline;
background-image : none;
background-position : 0 0;
background-repeat : repeat; }

前面的代码针对任何以icon-开头或包含icon-的内容。这是通过正则表达式^和*完成的。正则表达式是正则表达式的缩写。正则表达式是用于搜索字符串的实用程序；它们使用各种符号来完成此任务。正则表达式是一个超出本书范围的巨大主题，但只需知道，通过在 CSS 中使用这些符号，CSS 引擎会在您的标记中搜索选择器字符串。并非所有可用的正则表达式符号都可以在 CSS 中使用，但使用^和*可能非常强大。

继续阅读，您会发现如果在<li>或<a>元素上使用这些类，还会应用其他样式。甚至还为将元素放在按钮或<li>标签内定义了特殊样式。我们不会使用这些，但请尝试使用它们。

如果您继续刷新页面，这看起来可能不太好；所以让我们开始为 320 和 Up 布局设置样式。我想要做的第一件事是制作将容纳我们图标的圆圈。我希望所有这些圆圈的大小都相同，所以我将设置一个统一的大小，以及我将在一会儿解释的其他一些样式：

.circle {
  background: #FFA500;
  @include rounded(28px);
  height: 56px;
  width: 56px;
  position: relative;
}

我实际上是通过一些试错得出这些尺寸的，但我不会让您感到无聊。边框半径设置为元素高度和宽度的一半。这是制作圆圈的方法。显然，使用旧浏览器的人会得到一个正方形。如果您对此不满意，可以放置某种polyfill或回退。请注意，我使用 mixin 来制作特定于供应商的边框半径，但如果您使用纯 CSS，您将需要键入所有这些。

最后，我将这些图标的position设置为relative，这样我就可以绝对定位每个图标在圆圈内。它们都有不同的尺寸，所以它们将各自获得一个独特的位置来适应这一点。

让我们继续对它们进行样式和定位。将这些样式放在.circle样式下面：

.big-icon {
  font-size: 2em;
  color: #FFF;
  text-shadow: -1px -1px #999;
  position: absolute;
  &.icon-fire {
    top: 15px;
    left: 18px;
}
  &.icon-leaf {
    top: 16px;
    left: 13px;
  }
  &.icon-lemon {
    top: 15px;
    left: 16px;
  }
}

前面的代码是 SCSS 代码。这是常规 CSS 的样子：

.big-icon {
  font-size: 2em;
  color: #FFF;
  text-shadow: -1px -1px #999999;
  position: absolute; }
  .big-icon.icon-fire {
    top: 15px;
    left: 18px; }
  .big-icon.icon-leaf {
    top: 16px;
    left: 13px; }
  .big-icon.icon-lemon {
    top: 15px;
    left: 16px; }

.big-icon样式只是使图标变大，白色，并带有一点阴影，使它们看起来像是被轻微压印到圆圈中。我认为这是一种很酷的效果。我还在这里将position设置为absolute，以确定所有图标的位置。我通过数学和用眼睛看的方式得出了所有图标的位置。

这是数学方法。在浏览器的开发者工具中查看图标的尺寸。以火焰图标为例，我看到它的尺寸为 22 x 25 像素。因此，要获得左侧定位，我从圆的宽度中减去图标的宽度，即 56 - 22 = 34。将其除以 2 以获得左侧位置，因为左侧位置在图标的左上角，所以我们需要从图标的左边缘到图标中心的距离。这给我们一个左侧位置为 17 像素。但后来我用眼睛看了看，觉得 18 像素更好，真是奇怪。对于剩下的图标也是如此。

现在，我们需要将文本定位在每个图标的右侧。看起来是这样的：

.content-body {
  overflow: hidden;
  .content-heading {
    margin: 0 0 5px;
  }
}

这很简单。唯一可能看起来奇怪的是overflow: hidden。它所做的就是确保文本保持在一个整洁的小框中，而不是围绕图标div流动。要了解更多信息，你可以咨询谷歌，但你可以参考alistapart.com/article/css-floats-101上的一篇精彩文章。

继续刷新页面并查看。看起来非常棒，但图标离文本太近了。让我们来修复一下。将以下代码添加到你的圆形样式中：

.circle {
  margin-right: 12px; /* this is the new bit */
  background: #FFA500;
  @include rounded(28px);
  height: 56px;
  width: 56px;
  position: relative;
}

啊！现在看起来很好！让我们继续添加我们的图片和简介。这是我们需要的标记：

<!-- sidebar content -->
<div class="full bio">
  <div class="sidebar-content">
    <div class="image-container">
      <img src="img/gallery_image-1.png"/>
    </div>
    <div class="bio-container">
      <h3>Will Smith</h3>
      <p>Seitan gastropub jean shorts DIY, shabby chic scenester flannel umami. Keffiyeh freegan small batch Neutra before they sold out, literally salvia 8-bit. Flannel trust fund swag Austin, locavore sustainable irony. Fingerstache pop-up readymade Schlitz try-hard. Roof party 3 wolf moon forage Schlitz, butcher squid Pinterest cardigan seitan. Cray YOLO helvetica, cliche tattooed single-origin coffee selvage food truck gastropub. Disrupt McSweeney's ugh put a bird on it.</p>
    </div>
  </div>
</div>
<!-- sidebar content -->

请注意，我们正在使用用于画廊页面的大占位图像，但当然你需要使用自己喜欢的时尚照片。说到画廊页面，我们需要在这里使用一些类似的样式来使图像和文本看起来正确。由于我们在两个部分都重复使用了full类，因此在生物内容和视口边缘之间有适当的空间。我们只需要在图像下方添加一个边距来将标题推下来。添加这个样式：

.image-container {
  margin-bottom: 2em;
}

根据你的喜好随意调整边距。

在 320 像素宽度下查看这个布局，一切都很好。当屏幕宽度为 992 像素或更大时，让它布局为两列。继续调整浏览器大小到 992 像素（或者在平板电脑上查看）。看起来很奇怪。幸运的是，我们只需要为这些分配适当的百分比宽度并浮动它们。尝试添加这些样式：

.summary {
  width: 55%;
  float: left;
}

.bio {
  width: 35%;
  float: right;
}

现在我们可以在每个内容块上使用summary和bio类。继续刷新，你会注意到页脚现在试图挤进两列之间的小区域。很容易解决。只需在_site.scss文件中的页脚样式中添加这个样式：

clear: both;

修复了！

好了，就这些了！

总结

在本章中，我们学会了使用图标字体并对其进行样式设置，使其看起来和位图图像一样出色；然而，它们更加灵活，因为我们可以通过 CSS 调整大小、颜色，并添加简单的阴影等效果。我们还迅速制作了一个自定义布局来满足我们的内容需求。太棒了！现在去利用我们所做的事情为自己和客户构建出色的东西吧！

附录 A. HTML5 Boilerplate 的解剖

这个附录是为了帮助那些对 HTML5 Boilerplate 没有经验的人。如果你对它很了解，就没有必要再读下去了（这就是为什么这是一个附录的原因）。但如果你对 HTML5 Boilerplate 还很陌生，这个附录将帮助你更深入地了解 320 和 Up 的情况。在这个附录中，我们将看一下 HTML5 Boilerplate 的结构和选择，并了解它的选择对你可能开发的进一步网页的影响。

HTML5 Boilerplate 是什么？

首先，你可以在html5boilerplate.com/找到该项目的主页。该网站提供了 HTML5 的快速概述，但并没有提供 HTML5 Boilerplate 有何用处以及为什么要创建它的背景。

我不会详细介绍 HTML5 Boilerplate 的历史。本书主要关注如何做事情，而不是事情发生的原因，所以我会尽量解释足够的背景知识，让你知道它是如何工作的，希望你未来在使用 HTML5 Boilerplate 和 320 以及其他框架时，能够有足够的理解来帮助你解决未来的问题。

实质上，HTML5 Boilerplate 是一个旨在创建一个具有所有组件的 HTML 页面的项目，这些组件是制作有效的跨浏览器网页所需的；它还利用了支持现代 HTML5 规范的现代浏览器中可用的所有优点。

如果你想了解我所说的 HTML5 规范是什么，或者现代浏览器和旧浏览器之间的区别是什么，那么我鼓励你进行一些搜索和阅读。我留给你的任何链接都有可能很快就过时了。但简而言之，HTML5 是一个规定浏览器应该做什么的规范。它是一种努力，使所有浏览器支持相同或类似的功能，以便让网页开发者能够制作一个网页，并使其在所有浏览器中表现相同。这还不是现实，我认为它永远不会成为现实；公平地说，现在的情况比以前好多了。

因此，作为一个网页开发者，在大多数情况下，你很可能至少需要支持IE 8 及以上版本，Firefox 4 及以上版本，以及当前版本的 Chrome（Chrome 的版本不那么重要，因为它一直鼓励用户更新）。请注意这里的挑战。所有浏览器的当前版本，除了 Chrome，都高于你必须支持的版本。此外，如果你在写作时正在制作一个网站，很可能你实际上需要支持这些浏览器的旧版本以及一些其他浏览器，具体取决于你的用户群。而且这些只是桌面版本；还有所有移动版本的浏览器以及 Android 版本的 WebKit，那里有无数个版本。

了解这一点，你就能明白为什么我和其他许多前端工程师都在倡导前端设计的简单性。简单的设计很有可能给最终用户带来良好的体验，以及接近一致性的东西。

但是，如果没有一些努力，你就不会得到那种经验和一致性。HTML5 样板对于代表你的努力有很大帮助。让我们在接下来的几页中详细了解它是如何工作的。当你阅读时，我建议你从第一章的before目录中打开index.html文件。这是我们还没有添加任何内容的样板版本。让我们从顶部开始！

条件注释

条件注释的代码如下：

<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

这段代码嵌套在注释中，但有一些条件逻辑。只有 Internet Explorer 才有超能力使用这个逻辑。前面的例子只有在执行它的浏览器版本小于 IE7 时才会渲染注释内的 HTML 代码，因此语法[if lt IE 7]。你可以推断出不同的 HTML 标记是根据 IE 的版本渲染的。你可以使用这个 HTML 标记中的类来创建特殊的样式，这些样式通常是处理这些旧浏览器的缺点所必需的。

如果你再往前跳一点，你会看到以下条件注释：

<!--[if (lt IE 9) & (!IEMobile)]>
  <script src="img/selectivizr-min.js"></script>
<![endif]-->

这包括在 320 和 Up 框架中包含的 JavaScript 库，允许 CSS3 选择器在 IE9 之前的浏览器中工作。

大量的移动元标记

接下来，在头部标签内，你会看到一些供供应商执行魔术的元标记。首先要注意的是：

<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">

如果你想进一步了解元标记，可以访问注释中提供的链接。我鼓励你这样做。

总之，这些元标记帮助移动浏览器知道他们可以渲染不仅仅是为桌面而设计的页面。习惯这一点，因为还有更多这样的东西即将到来。

在此之后，有一堆注释，让你为苹果设备创建图标。如果用户想为你的网站创建快捷方式，这些图标很酷。它会为你的网站创建一个图标，就像一个应用程序一样。如果你想利用这一点，你需要所有尺寸的图标，并且需要将它们放在已经指定的路径中，或者编辑路径以便加载你的图标文件。

还有更多苹果特定的元标记。正如你所看到的，对于许多元标记，你只需要填写空白字段（例如，apple-mobile-web-app-title）。

<meta name="viewport" content="initial-scale=1.0">

前一行代码确保页面不会被放大，只要你在下一行代码的content字段设置为yes：

<meta name="apple-mobile-web-app-capable" content="yes">

在接下来的部分中，标记为启动图像的部分为您的网页提供了更多类似应用的功能。当用户从主屏幕启动您的网站时，这些图像将填满他们的屏幕，直到页面加载。同样，您需要提供所有列出的尺寸的图像，并将它们放在正确的路径中。然而，你应该知道这个特定的标记块可能会被移除，并用更清晰的代码应用。当我们一起查看helper.js文件时，你会在一会儿了解到这一点。

令人欣慰的是，Windows 8 的下一个标签集几乎没有新增的工作！这个标签可以并且应该与你为苹果创建的图标共享，并将出现在那些漂亮的 Windows 8 磁贴中。你可以在以下标签中设置你的磁贴颜色：

<meta name="msapplication-TileColor" content="#000">

拜托，拜托，我请求你。把它设置成热粉色。

呼！我们已经完成了头部！

现在，你可以跳到文件的底部。

包括你需要的脚本

其余的并不是太令人惊讶。我们在页脚下面包括以下脚本，并按顺序：

• jQuery（首先从 CDN 加载，然后作为备用本地加载）

• 一个插件文件

• 一个脚本文件

• 一个辅助文件

• Google Analytics

以这种方式制作您的网站没有问题，但我经常将插件、脚本和辅助程序合并到一个文件中。

helper.js文件应该放在脚本文件之前；否则你无法调用其中的函数。如果它们是正确的，只需重新排列它们，你就可以继续了。

最后一件事是我想给你一个辅助文件的概述，因为这是 HTML5 样板的一部分。

helper.js 文件

这个文件中的代码真的很有帮助。其中的注释大部分解释了每个函数的作用。尽管如此，我想强调一些事情，并确保你知道如何实现它们。

基本上，要调用这里的任何函数，只需在你需要的文件中找到一个函数（或者只是想尝试）并在其后加上();。这是 JavaScript 执行函数的方式。例如，这个文件中定义的第一个可用函数（你可以看出它们是函数，因为它们中有单词function）如下：

MBP.scaleFix = function() {…

如果你想使用这个函数，只需将以下内容添加到你的脚本文件中：

MBP.scaleFix();

看，你刚刚调用了这个函数。现在让我们快速浏览一下这里最有用的函数都做些什么。请记住，脚本中的许多项目是函数本身使用的；所以，如果你尝试使用它们，它们可能不会做任何事情，特别是那些没有单词“function”的项目。

• MBP.scaleFix：这个函数可以解决 iOS 中的一个恼人的 bug。当用户将手机从竖屏旋转到横屏时，这个 bug 就会出现。在横屏模式下，你可爱的网页将会跑到屏幕边缘之外。但是，别担心；这个脚本可以修复它。所以你应该使用它。

• MBP.hideUrlBar和MBP.hideUrlBarOnLoad：这两个函数是可调用的，但你更有可能使用MBP.hideUrlBarOnLoad来做几乎和它名字一样的事情。这个函数在移动设备上非常有用，因为一旦页面加载完成，它会将 URL 栏向上滚动，从而节省宝贵的屏幕空间。这对使用 iPhone 上的 Safari 的用户非常有用。我想你可以调用MBP.hideUrlBar，但我很难想象一个情景，在那种情况下你想直接调用它而不让用户感到恐慌。MBP.hideUrlBarOnLoad调用MBP.hideUrlBar。

• MBP.fastButton：这是一个用于解决 WebKit 浏览器的一个特性的函数，当用户触摸链接或按钮时会引入轻微的延迟。请谨慎使用。

• MBP.splash：这个脚本可以替换我们之前讨论过的启动图像的注释代码块。它是在我们之前检查的样板中提供的。如果你已经忘记了，回去再读一遍。我真的很喜欢使用这个 JavaScript 来替换页面中所有那些标记，特别是考虑到只有少数用户会看到这个启动画面。实际上，如果你去获取最新版本的 HTML5 移动样板，而不是当前（截至本文撰写时）320 和 Up 版本中提供的索引页面，它将不会有那个带有所有启动图像的标记块。

• MBP.autogrow：如果你的响应式网站上有表单，这个功能非常棒。它会在用户填写时使<textarea>自动增长。

• MBP.enableActive：这是另一个很棒的增强功能，可以在移动 Safari 中启用 active 伪类，对于那些按钮的用户反馈很好，因为它们往往会有点延迟（除非你足够勇敢使用FastButton）。

• MBP.preventZoom：这个函数做了它说的。Mobile Safari 的默认行为是在发生焦点事件时放大。这对用户来说真的很不方便，因为他们必须在输入文本到输入字段后手动缩小。

现在你已经了解足够多的内容，可以在自己的应用程序中进行实验了。在大多数情况下，你会希望在页面加载和准备就绪时触发这些函数，所以只使用你需要的函数，以防止在小设备上加载大量 JavaScript。

附录 B. 使用 CSS 预处理器

如果你已经阅读了本书的任何部分，你已经知道我恳求你使用 CSS 预处理器，比如 Sass 或 LESS。我更喜欢 Sass 有几个原因，但我不会详细介绍。相反，我更喜欢专注于这两者之间的相似之处，我会留给你决定你更喜欢哪种框架。我并不是在故作神秘或不诚实；我真的觉得这样的争论很累人，尤其是当它们涉及到个人背景时。

我要再次说，我更喜欢 Sass。对我来说，部分原因是语法，但与 LESS 的差异相当小。另一个原因是我主要使用 Ruby on Rails，而 Rails 默认支持 Sass。此外，我发现 SCSS 的语法（而不是早期的 Sass）与 CSS 非常相似，而我已经使用 CSS 大约 25%的时间，所以我更喜欢它，因为它与我熟悉的 CSS 的认知转变较小。

我也发现 LESS 的一些语法很令人困惑。主要的两个例子是它们如何使用@符号来表示全局变量，而 Sass 使用$符号，以及 LESS 如何使用 CSS 类的表示法.来调用 mixin，而 Sass 使用更明确的@include。这些都是小小的抱怨。

但是，这就是我的理由。希望你能从中找到一些有用的东西，来决定哪种方法最适合你。

现在，让我们继续了解所有这些预处理器如何帮助你快速高效地工作。希望这足以激发你的兴趣，让你能够学到更多。我将在本章结束时列出一些资源，你可以独立学习更多。

为什么？

我们为什么需要预处理 CSS？以下是一些简单的原因：

• CSS 中没有变量

• 当样式化嵌套元素时，你的代码不会符合 DRY 原则，也就是说，你会重复输入很多类和/或 ID

• 在 CSS 中重复使用代码并不方便，因此你最终会得到不符合 DRY 原则的代码

• CSS 中根本没有逻辑

• 预处理器允许我们以动态方式处理颜色关系，而不是静态地分配所有颜色值；当与使用变量的能力结合使用时，这是非常强大的

这些都是宽泛的解释。本附录以及整本书应该会给你很多详细的例子，说明这些预处理器何时有用。

如何？

好的，所以你从未尝试过预处理器。你该如何开始呢？当然，这取决于你选择 LESS 还是 Sass。我将带你了解使用这两种方法的三种简单方式。

CodeKit

最简单的方法是使用一个名为 CodeKit 的 Mac OS X 应用程序。我并没有从这个应用的制造商那里得到任何回报。这只是一个稳定、简单的应用程序，可以做很多以前有点麻烦的事情。它的价格也不贵，你可以在incident57.com/codekit/上获取它。

如果你不是用 Mac，那么很遗憾，因为这个应用只适用于 Mac。

一旦你下载并启动它，添加一个项目就很简单。该应用程序足够智能，可以找到你项目中的所有文件；更准确地说，符合这些类别的文件是样式表、脚本、页面和图像。

CodeKit 将以各种方式预处理所有这些内容；它甚至会为你优化图像。尽管我很喜欢命令行，但这个应用程序的便利性确实让我很满意。我尽量避免过分赞美，但它还会做一些其他事情，比如预处理 haml 并运行 JSLint 或 JSHint；它会合并和压缩所有你的 JavaScript，优化图像，并拥有许多功能，我就不深入介绍了。

但是，我们现在不是来使用所有这些东西的，我们是来讨论它如何促进 LESS 和 Sass 的预处理的。我将继续描述如何设置这个假设你还没有拥有这个应用，但只是想了解更多关于它是如何工作的，更具体地说，它是如何与 320 和 Up 一起工作的。如果你正在使用 320 和 Up，并且已经把所有项目文件放在了它们应该在的地方，你不需要做太多其他的事情就可以开始。只需确保选择适当的文件，它基本上会引入所有其他文件，并确保它将正确的文件输出到正确的位置。由于 CodeKit 有一个简单的用户界面，你只需要右键单击320andup-scss.scss（例如，还有一个等价的文件用于 LESS 和其他文件），设置输出路径、文件名等。就是这样。现在让我们看看一些命令行工具。

指南针

指南针是一个社区驱动的命令行工具。也有图形用户界面。我对它的经验较少，但他们的网站上有很多教程和指南，如果你想尝试一下：compass-style.org/。指南针是一个 Ruby gem，所以你可以在命令行上轻松安装和运行它。指南针不会处理 LESS。但是 LESS 预处理器非常简单，可以通过 Node 包管理器轻松设置。

Sass/LESS gem

这个解决方案类似于使用指南针。你可以在命令行上安装一个 gem，并进行简单的配置。就像之前提到的指南针和 CodeKit 一样，它会寻找文件更改并处理你的预处理代码。我曾经遇到过 LESS 成功寻找任何代码更改的问题。

铁轨

所以，这在技术上是第四种方式，而且把铁轨作为预处理 CSS 的方式有点多余，但你可以在铁轨项目中使用之前提到的任何一个 gem。Sass gem 会监视代码更改并在没有进一步交互的情况下处理它们。同样，在过去，我曾经遇到过 LESS 无法监视文件更改的问题，我不得不重新启动服务器才能处理代码。这对我来说是不可接受的，因为它只会浪费时间。另一方面，现在可能已经修复了一些问题，但我已经因为其他原因转向了 Sass，其中一些我之前已经概述过。

我们将很快转向预处理代码本身发生的事情，但我只是想告诉你，如果你对命令行工具感到害怕，不要害怕。我最初是作为一个图形设计师开始这个职业的，现在我喜欢上了命令行的简单和优雅。有很多简单的初学者课程是免费的，或者在网上非常便宜，可以帮助你克服恐惧或困惑。我是学习困难的方法教程的粉丝，但还有很多其他教程，而且还会有更多。一旦你熟悉了命令行，我可以保证你将能够比以前更有效地工作。

什么？

让我们看看我们正在处理的示例项目，看看它是如何组合在一起的。在这本书中，我专注于 320 和 Up 的 SCSS 变体，所以我将在附录中继续使用相同的内容。在很大程度上，LESS 是类似的，但有一些语法上的不同。我会在路上指出一些关键的例子。

让我们从第二章的before项目文件开始，构建主页。看一下320andup目录里的文件结构。我想要专注的主要事情是css目录和scss目录。其他的兄弟目录，比如less、sass-compass、sass和scss-compass，以不同的方式包含了这只猫的代码。

接下来是scss文件夹，你会注意到文件320andup-scss.scss和一堆文件名前面带下划线的文件。例如，带下划线的文件，比如_1382.scss，被称为 partials。下划线让预处理器知道不要将这些单独的文件转换为 CSS。但它们最终还是要被处理的，对吧？这是在它们被导入到唯一一个没有下划线的文件之后发生的。（另一方面，LESS 不使用这种下划线约定。对我来说，这是我给 Sass 的另一个小优势。使用 Sass，我可以快速浏览文件树，知道哪些文件是 partials，哪些不是。）

以320andup-scss.scss文件为例，可以将这个文件看作是母船。所有其他小船都停靠在那里并卸下货物。一旦所有货物都到齐，事情就开始发生了。具体来说，CSS 就开始发生了。

要了解这是如何组合在一起的，让我们看看母船——320andup-scss.scss。

你会注意到这个文件只是一个很干净的文件，它对imports进行了排序。注意，在import语句中，partials 没有下划线。此外，排序很重要，例如，你希望在尝试使用它们之前定义所有的变量和 mixin。其他的imports被放在@media查询内，这样那些带下划线的文件（partials）只在这些查询内使用。

这有什么好处呢？它可以让你的代码保持整洁，易于使用和维护。这就是 320 and Up 框架的好处。它负责组织所有这些繁忙的工作。

最后，我想列出一些资源供你查阅，以了解更多关于 CSS 预处理器及其辅助工具的信息。享受吧！

资源

以下是一些资源列表，供你了解更多关于 CSS 预处理器及其辅助工具的信息：

• Sass: sass-lang.com/

• LESS: lesscss.org/

• Compass: compass-style.org/

• CodeKit: incident57.com/codekit/