精通响应式Web设计全绝不原创的飞龙

492 509

在响应式Web设计之前，网页设计师和前端开发人员的工作主要集中在将印刷布局转化为网站和应用程序。元素和尺寸是固定的，它们需要适应和缩放的需求并不是我们今天必须考虑的概念的一部分。

设备有各种形状和大小。针对支持（或不支持）某些HTML、CSS和JavaScript技术、UX原则、可用性最佳实践的操作系统和浏览器，以及了解移动设备如何影响我们生活的世界，现在是作为网页设计师和前端开发人员所做的工作的“复杂”部分。

在这本书中，我提供了大量关于RWD如何为更好的网站和Web应用程序提供路径的技术和概念信息。安装和使用Sass，处理图像和视频，以及创建稳健的排版比例来构建响应式电子邮件是本书中您将能够阅读到的一些内容宝石。

升级的时候到了！

第一章，“利用Sass的力量进行响应式Web设计”，从安装Sass的最简单的步骤开始；然后我们学习如何让Sass“监视”我们的SCSS文件。然后，有关基本Sass概念的易于理解的解释，如变量、混合、参数、嵌套、部分文件、@import指令、源映射和Sass注释。我们还学会了自动添加供应商前缀并使用Prepros自动编译我们的SCSS文件。我们讨论了创建混合以尽可能轻松地处理媒体查询，考虑内容如何定义断点。

第二章，“使用HTML5标记我们的内容”，澄清了HTML是一种标记语言，而不是代码。然后，我们讨论了最常用的HTML5元素，这些元素允许我们语义化地标记我们的内容。以简单的方式改善我们构建的可访问性与ARIA角色也是我们要解决的问题。我们还讨论了RWD所需的不同元标记，然后有一个将所有内容整合在一起的示例。

第三章，“移动优先还是桌面优先？”，揭示了为什么以及何时应该使用移动优先或桌面优先。通过示例，我们将学习如何使用自适应Web设计和响应式Web设计来改造网站。我们将了解Respond.js和条件类，以支持在构建移动优先时的旧版浏览器。

第四章，“CSS网格、CSS框架、UI工具包和Flexbox用于响应式Web设计”，帮助我们理解什么是网格，如何使用它以及为什么。有了这个理解，我们在构建网站或Web应用程序时可以做出明智的决定。我们还使用浮动技术和Flexbox创建自定义CSS网格。我们将再次使用条件类来解决旧版浏览器的问题，并借助一个小脚本，我们可以使用.ie10特定选择器来处理IE10的怪癖。

第五章，“设计由大手指驱动的小型UI”，展示了可用性和可访问性在本章中起着重要作用。我们还找到了关于目标区域的不同大小、控件的位置（链接、按钮、表单字段等）以及不同设备上的触摸区域的解释。还有三个关于如何创建菜单按钮的示例，以及三个关于移动导航模式的示例。

第六章，响应式网页设计中的图像和视频处理，是本书中最有趣的章节之一，因为RWD中的图像是一个“事物”。我们将讨论使用元素和srcset属性为不同的图像提供不同的方式。本章还介绍了使用CSS、jQuery和JavaScript使视频具有响应性。我们还将学习使用基于矢量的文件，如图标字体和SVG。

第八章，响应式电子邮件，表明电子邮件在移动设备上的打开次数比在台式机上更多；响应式电子邮件在移动设备上的参与度比非响应式电子邮件更高；人们在台式机上点击电子邮件的次数比在移动设备上更多。我们还将创建一个电子邮件模板作为示例。我们将学习使用CSS重置块来规范那些古怪的电子邮件客户端，并了解到电子邮件的最佳宽度不超过600像素。

所有这些章节都有CodePen演示。

在阅读本书的示例时，需要考虑以下几点：文本编辑器或IDE（本书中使用SublimeText），互联网访问和在您的计算机上安装应用程序的管理员权限。

您可能还需要图像编辑软件，如Photoshop、Fireworks或GIMP。如果您使用其他软件，也完全可以。

如果可能的话，您可以使用一种或两种真实的移动设备来体验示例和演示的正确环境。否则，使用Chrome的DevTool的设备模式功能也可以。

如果您已经了解一些HTML和CSS，并且理解响应式网页设计的原则，那么这本书适合您。无论您是网页设计师还是网页开发人员，无论您是初学者还是经验丰富的网络专业人士，这本书都有您需要学习的内容。

对HTML和CSS的良好理解是必需的，因为RWD在很大程度上依赖于这些技术。对jQuery的一些了解也是推荐的，但不是强制的。

在本书中，您会发现一些文本样式，用于区分不同类型的信息。以下是一些这些样式的示例，以及它们的含义解释。

文本中的代码单词、文件夹名称、文件名、文件扩展名、路径名、虚拟URL、用户输入和Twitter句柄显示如下：“sizes属性也可以与元素一起使用，但我们将专注于使用sizes属性与标签。”

代码块设置如下：

*,*:before,*:after{box-sizing:border-box;}//Moble-firstMediaQueriesMixin@mixinforLargeScreens($width){@media(min-width:$width/16+em){@content}}任何命令行输入或输出都会以以下方式书写：

geminstallsass新术语和重要单词以粗体显示。您在屏幕上看到的单词，比如菜单或对话框中的单词，会以这种方式出现在文本中：“点击下一步按钮会将您移动到下一个屏幕”。

警告或重要提示会以这样的方式显示在一个框中。

提示和技巧会以这样的方式出现。

在我们深入掌握使用HTML5和CSS3进行响应式网页设计之前，我们需要就技术达成共识，就我们的情况而言，CSS预处理器，特别是Sass。

在本书中，所有的CSS都将以SCSS格式写成Sass。我们编写CSS的方式已经改变，改进非常大。

CSS预处理器如Sass、LESS和Stylus为网络/移动设计师和开发人员提供了新的超能力。是的，我用了超能力这个词，因为这正是我第一次使用Sass仅仅几个小时后的感受，而我使用的只是最基本的东西：

.navigation-bar{display:flex;li{padding:5px10px;}}看到嵌套的li选择器了吗？是的，那就是Sass在起作用。当前面的代码被编译时，就会变成这样：

.navigation-bar{display:flex;}.navigation-barli{padding:5px10px;}提示下载示例代码

让我们来看看本章给我们带来了什么：

了解Sass的工作原理涉及理解几个基本的技术概念：

监视一个SCSS文件意味着Sass监视器在后台监视SCSS文件的任何更改。

以下是我们将要遵循的步骤：

Windows：从以下链接下载Ruby安装程序：

Mac：Ruby预装在所有的Mac上，所以不需要下载任何东西。

Windows和Mac：打开命令行。

Windows提示！

按下Windows+R，输入CMD，然后按Enter。

在命令提示符中键入以下命令（无论您在哪个文件夹中都可以）：

Windows，使用以下命令：

geminstallsassMac，使用以下命令：

在撰写本文时，Sass的最新版本是3.4.14。版本/修订可能在书出版时有所不同。

就是这样！Sass现在已经安装在您的计算机上。

我将要向您展示的内容与其他任何Sass教程告诉您要做的完全不同。大多数教程都把事情复杂化了。这是您将阅读到的使用Sass的最简单的方法。

以下的屏幕截图是在Windows上的，但是这个过程可以在任何平台上完全相同地应用。

在接下来的步骤中，您将看到创建后的必要文件夹和文件的示例，而不是如何创建它们：

注意文件扩展名.scss？这是你的Sass文件。是的，现在里面什么都没有，它是空的。

sass--watchscss:css-就是这样！你现在正在使用Sass！

首先，Sass是一种编程/脚本语言。我打赌你没有想到。是的，它是一种专注于提高网页设计师和开发人员创建CSS效率的编程/脚本语言。在本书中，我们将专注于Sass的简单部分，这些部分可以帮助我们更有效地编写CSS，更重要的是，我们会在其中获得乐趣。

实施RWD是耗时的：编码、测试、创建资产、浏览器故障排除，然后再进行更多测试。我们简化编码过程的程度越高，重复性工作越少，我们就变得越有效率，为项目、团队、业务甚至最终用户增加的价值也就越多。Sass将会做到这一点——帮助我们简化CSS的编码。

让我们先讨论以下概念：

我们可以用两种方式编写Sass风格的CSS：Sass语法和SCSS语法。

不要误解；Sass是大写S，其余都是小写，而SCSS全部大写。

Sass语法，也被称为缩进语法，是最初和唯一的编写Sass的方式。但它看起来与常规CSS有些不同，使学习曲线比实际需要的更陡峭。

这种语法没有使用任何大括号或分号。在某些情况下，它使用等号而不是冒号。与SCSS不同，缩进非常严格且是强制性的。许多开发人员对Sass语法的这些方面并不太喜欢。

这是一个基本的例子：

.selector-afloat:left.selector-bbackground:orange这将编译成以下代码：

.selector-a{float:left;}.selector-a,.selector-b{background:orange;}SCSS语法当SCSS在Sass的第3个版本中引入时，对于我们这些不是程序员但想要利用Sass功能的人来说，事情变得更容易了。

SCSS代表SassyCSS。

如果你已经写CSS，那么你已经写了SCSS。我们在编写CSS时已经使用的所有东西，在使用SCSS语法编写Sass时也是一样的。因此，学习曲线最初是不存在的。

然后，你会意识到你还可以使用一些增强你已经知道的Sass功能，这使得学习Sass成为一种很棒的体验，因为你可以相当快地变得擅长它。说实话，这感觉就像你正在获得超能力。我不是在开玩笑。

以下是我们之前看到的相同示例，使用SCSS语法：

.selector-a{float:left;}.selector-a,.selector-b{background:orange;}等一下！那是CSS！是的，它也是SCSS。

让我们以不同的方式使用SCSS语法看同一个例子：

.selector-{&a{float:left;}&a,&b{background:orange;}}在SCSS中，&符号允许我们将父选择器的名称添加到嵌套选择器中，而无需输入整个内容，使我们保持DRY的状态。

DRY表示不要重复自己。

这两个SCSS示例编译为以下代码：

.selector-a{float:left;}.selector-a,.selector-b{background:orange;}Sass变量首先让我们了解一些事情：

在列出多个变量时，每个变量的末尾应该有一个分号(;)。如果只有一个变量，则不需要分号。然而，即使只有一个变量，最好也以分号结束变量，这是一个好习惯。

以下是Sass变量的一个例子：

$brandBlue:#416e8e;提示我建议您使用驼峰命名法来命名变量，以便将它们与以破折号分隔的类名和CSS属性区分开。在扫描SCSS文档时，这非常有帮助，因为变量更容易检测到。

正如我们所看到的，我们正在存储一个颜色值。我们使用的名称brandBlue肯定比#416e8e更用户友好。此外，我们使用了美元符号($)并以分号(;)结束，以防我们需要添加更多变量。现在，如果以后需要更改值，我们只需要在一个位置进行更改。

变量应始终包含在SCSS文件的顶部，以便Sass知道在使用它们时应该去哪里。您还可以通过部分文件包含它们，但我们将在本章后面讨论部分文件是什么。

以下是如何使用SCSS变量的示例：

$brandBlue:#416e8e;body{background:$brandBlue;}上述代码编译为以下内容：

关于Sassmixin需要考虑的几件事情如下：

我们还没有看到参数是什么，但现在提到这个词很重要，这样你就可以开始熟悉不同的Sass术语。我们将在下一节中介绍Sass参数。

让我们看一个mixin的例子：

$brandBlue:#416e8e;$supportGray:#ccc;@mixingenericContainer{padding:10px;border:$brandBlue1pxsolid;background:$supportGray;box-shadow:1px1px1pxrgba(black,.3);}我们在SCSS文件中调用mixin如下：

.selector-a{@includegenericContainer;}编译后，在CSS中看起来像这样：

.selector-a{padding:10px;border:#416e8e1pxsolid;background:#cccccc;box-shadow:1px1px1pxrgba(0,0,0,0.3);}让我们回顾一下我们在mixin中所做的事情。

我们使用了@mixin指令：

$brandBlue:#416e8e;$supportGray:#ccc;@mixingenericContainer{padding:10px;border:$brandBlue1pxsolid;background:$supportGray;box-shadow:1px1px1pxrgba(black,.3);}我们使用驼峰命名约定来区分mixin的名称和以破折号分隔的类名和CSS属性：

$brandBlue:#416e8e;$supportGray:#ccc;@mixingenericContainer{padding:10px;border:$brandBlue1pxsolid;background:$supportGray;box-shadow:1px1px1pxrgba(black,.3);}我们在mixin中使用了Sass变量：

$brandBlue:#416e8e;$supportGray:#ccc;@mixingenericContainer{padding:10px;border:$brandBlue1pxsolid;background:$supportGray;box-shadow:1px1px1pxrgba(black,.3);}在box-shadow颜色属性中使用关键字black，而不是使用十六进制#000或rgb(0,0,0)值：

$brandBlue:#416e8e;$supportGray:#ccc;@mixingenericContainer{padding:10px;border:$brandBlue1pxsolid;background:$supportGray;box-shadow:1px1px1pxrgba(black,.3);}为此，我们也可以像这样使用我们的变量名：

$brandBlue:#416e8e;$supportGray:#ccc;@mixingenericContainer{padding:10px;border:$brandBlue1pxsolid;background:$supportGray;box-shadow:1px1px1pxrgba($brandBlue,.3);}我们还省略了alpha值中的0（.3）。这实际上不是Sass的特性；这是CSS的特性：

$brandBlue:#416e8e;$supportGray:#ccc;@mixingenericContainer{padding:10px;border:$brandBlue1pxsolid;background:$supportGray;box-shadow:1px1px1pxrgba($brandBlue,.3);}提示在以零开头的小数值上，零可以被省略。

同样，上述mixin编译为以下CSS：

.selector-a{padding:10px;border:#416e8e1pxsolid;background:#cccccc;box-shadow:1px1px1pxrgba(65,110,142,0.3);}Sass参数在我们的第一个mixin示例中，我们没有任何参数。这实际上并不理想，因为它不允许我们在相同的属性中使用不同的值。实际上，在mixin中不使用任何参数并不比每次需要它们时键入相同的属性和值有任何不同。我们并没有真正做到DRY。

参数是mixin的一部分，您可以根据需要放入自己的值。参数使mixin值得创建。

在前面提到的mixin示例中，让我们添加一个参数：

$brandBlue:#416e8e;$supportGray:#ccc;@mixingenericContainer($padding){padding:$padding;border:$brandBlue1pxsolid;background:$supportGray;box-shadow:1px1px1pxrgba(black,.3);}padding参数允许我们设置任何我们想要的值。我们并不强制每次都将填充设置为10px。

这是我们如何设置参数的值：

.selector-a{@includegenericContainer(10px);}这编译为以下内容：

.selector-a{padding:10px;border:#416e8e1pxsolid;background:#cccccc;box-shadow:1px1px1pxrgba(0,0,0,0.3);}但是，参数存在潜在问题；如果我们不为padding设置值，编译时会出现错误。

因此，这里的解决方案是设置一个默认值；如果由于某种原因我们没有为padding定义一个值，Sass将采用默认值并在编译时使用它而不会抛出错误。

以下是如何设置参数的默认值：

.selector-a{@includegenericContainer;}编译后的CSS如下：

.selector-a{padding:8px;border:#416e8e1pxsolid;background:#cccccc;box-shadow:1px1px1pxrgba(0,0,0,0.3);}如何在同一个mixin中使用多个参数在前面的mixin基础上，让我们添加一些更多的参数，使其更加健壮和可扩展：

.selector-a{@includegenericContainer(2%,$brandBlue,#ccc,black);}我们可以使用相同的mixin并获得不同的样式，而无需重复输入所有属性。

前面的mixin及其参数编译为以下代码：

以下是我们如何在参数中设置默认值：

.selector-a{@includegenericContainer(25px);}这编译为以下内容：

.selector-a{padding:25px;border:orange1pxsolid;background:#999999;box-shadow:1px1px1px#333333;}提示某些Sass编译器将简写的颜色十六进制值#333转换为长格式值#333333。

Sass中的嵌套是使我们的SCSS更易读的完美方式。就像在HTML中，标签基于其父元素进行嵌套一样，Sass使用完全相同的结构。

以下是导航栏的两级选择器嵌套示例：

$brandBlue:#416e8e;nav{ul{display:flex;margin:0;padding:0;list-style:none;}li{margin:5px;background:#000;}a{display:block;padding:5px15px;text-decoration:none;color:$brandBlue;}}提示注意深层嵌套！最佳实践建议最多嵌套三个级别。否则，我们将在未来遇到选择器特异性和可维护性问题。

您是否注意到我再次使用了$brandBlue颜色变量？前面的导航栏的SCSS编译为以下CSS：

navul{display:flex;margin:0;padding:0;list-style:none;}navli{margin:5px;background:#000;}nava{display:block;padding:5px15px;text-decoration:none;color:#416e8e;}Sass中的局部文件（partials）局部文件是我们创建的用于存放SCSS片段的SCSS文件。局部文件允许我们模块化我们的文件，例如，_variables.scss。局部文件以下划线符号（_）开头，并以扩展名.scss结尾。下划线符号告诉编译器，这个文件及其内容不需要编译成单独的CSS文件。

局部文件使用@import指令调用，就像在CSS中一样。主要区别在于无需指定下划线符号和文件扩展名。

让我们创建一个局部文件，并把这些颜色变量放在里面。我们将称这个局部文件为_variables.scss。_variables.scss局部中的变量（片段）如下：

$brandBlue:#416e8e;$brandRed:#c03;$brandYellow:#c90;然后我们假设我们的主SCSS文件名为styles.scss。现在我们有两个文件：styles.scss和_variables.scss。

项目的主SCSS文件不以下划线符号开头。

我们使用@import指令将_variables.scss调用到styles.scss中：

@import"variables";注意，在引用局部文件时，下划线符号和文件扩展名是不需要的；它们可以被省略。但是，如果你想添加它们，也可以。省略它们可以使代码更清晰。

许多专业人士说，扩展或继承是Sass最有用的功能之一。其他人实际上建议远离它。本书的建议是：尽可能多地使用Sass，并尝试不同的功能，这样你就可以形成自己的观点。当你有足够的经验时，你可以决定加入哪一方。

在Sass中扩展意味着我们可以在另一个选择器中使用选择器的属性，而不必再次输入所有这些属性。这就是所谓的继承。我们使用@extend指令来实现这一点。

例如，考虑以下选择器：

$brandBlue:#416e8e;.generic-container{padding:10px;border:$brandBlue1pxsolid;background:#ccc;box-shadow:1px1px1pxrgba(black,.3);}假设我们想要在不同的选择器上继承这个选择器的所有属性。我们还要修改一个属性，因为它们几乎是相同的，使用@extend指令在第二个选择器中重用第一个选择器的样式：

.box-customer-service{@extend.generic-container;padding:25px;}这编译成以下内容：

由于我们知道CSS文档是有效的SCSS文档，因此使用CSS注释语法也是有效的：

/*ThisisatraditionalCSScomment*/在Sass中，还有另一种方法。我们可以在开头使用双斜杠（//）进行注释。

//ThisisaSass-stylecomment两种样式之间的区别在于使用/**/语法的传统CSS注释会添加到编译后的文件中，而使用//的Sass注释则不会添加。

Sass语法中的注释非常有用，可以在不必担心所有这些注释被编译并使最终的CSS文件变得臃肿的情况下记录我们的SCSS文件。以下示例中的Sass注释不会被编译：

$brandBlue:#416e8e;//Mixinforgenericcontaineracrosstheapp.generic-container{padding:10px;border:$brandBlue1pxsolid;background:#ccc;box-shadow:1px1px1pxrgba(black,.3);}然而，传统的CSS注释确实被编译了：

$brandBlue:#416e8e;/*Mixinforgenericcontaineracrosstheapp*/.generic-container{padding:10px;border:$brandBlue1pxsolid;background:#ccc;box-shadow:1px1px1pxrgba(black,.3);}提示现在，根据编译器上设置的选项，最终的CSS可以被最小化。因此，传统的CSS注释将被剥离以优化文件大小。

供应商前缀基本上是为尚未被广泛使用或最终包含在CSS3规范中的CSS3属性或值添加特定的标签。

供应商部分指的是代表创建浏览器的公司名称的缩写标签：Mozilla、Opera和Microsoft。

不过，有一个例外，苹果。尽管苹果创建了Safari，但供应商前缀是基于浏览器的布局引擎而不是公司名称。

前缀部分指的是在CSS属性或CSS值之前添加供应商标签的描述。每个供应商前缀只在自己的浏览器中有效，因此对于上述列表，这里是它们所属的浏览器：

如果你想知道谷歌Chrome在这一切中的位置，这有一个简单的解释。

尽管谷歌创建了Chrome，但Chrome没有特定的前缀。起初，Chrome使用与Safari相同的布局引擎：Webkit。因此，基于Webkit的前缀不仅影响了Safari，还影响了Chrome和其他基于Chromium的产品。

然而，谷歌浏览器不再使用Webkit；它现在使用自己的布局引擎称为Blink。然而，为了保持兼容性并避免进一步分裂网络，Chrome仍然支持-webkit-前缀。

Opera有一个类似的故事，他们有自己的布局引擎Presto，然后切换到Webkit。现在它使用Blink。除了之前提到的浏览器供应商之外，还有其他浏览器供应商，他们也使用自己的前缀，比如Konqueror浏览器的前缀-k-。

这是一个带有供应商前缀的CSS属性的例子：

-moz-box-sizing:border-box;这里有一个带前缀的CSS值的例子：

background-image:-webkit-linear-gradient(red,blue);供应商前缀的顺序事实上，我们列出供应商前缀的顺序并不重要；重要的是我们总是将非供应商前缀的版本放在最后。

以linear-gradient属性为例，我们应该这样做：

*,*:before,*:after{background-image:-webkit-linear-gradient(red,blue);background-image:-moz-linear-gradient(red,blue);background-image:-ms-linear-gradient(red,blue);background-image:-o-linear-gradient(red,blue);background-image:linear-gradient(red,blue);}提示如果你喜欢，你也可以使用background:linear-gradient(red,blue);。

现在，许多CSS3属性和值不需要所有供应商前缀。大多数情况下，它们只需要一些供应商前缀，其他时候非供应商前缀的属性或值就足够了。

但是，我们如何知道哪些CSS3属性和值可以加前缀，哪些不需要，这样我们就可以创建受某些旧浏览器支持的样式，而不必记住太多信息？

答案是自动化供应商前缀的过程。

供应商前缀带来了一些问题，如果我们希望一些CSS3属性在当前浏览器和/或某些旧浏览器中工作，我们就无法摆脱这些问题。供应商前缀是肮脏的工作，我们不必须这样做。

那么，我们如何在尽可能保持DRY的情况下自动化供应商前缀的过程呢？有几种方法。

Compass是一个帮助我们更有效地编写CSS的Sass框架。Compass有一个庞大的mixin库，我们可以使用它来处理供应商前缀。

一旦我们安装了Compass，我们需要导入包含我们需要的mixin的特定模块。

继续使用之前使用的线性渐变示例，让我们将Compass的images模块导入到我们的SCSS文件中。将其放在主SCSS文件的顶部：

@import"compass/css3/images";然后，我们可以使用相应的mixin：

header{@includebackground-image(linear-gradient(red,blue));}这将编译为以下内容：

header{background-image:url('data:image/svg+xml;base64,…');background-size:100%;background-image:-webkit-gradient(linear,50%0%,50%100%,color-stop(0%,red),color-stop(100%,blue));background-image:-moz-linear-gradient(red,blue);background-image:-webkit-linear-gradient(red,blue);background-image:linear-gradient(red,blue);}这里有一些新东西。

header{background-image:url('data:image/svg+xml;base64,…');background-size:100%;background-image:-webkit-gradient(linear,50%0%,50%100%,color-stop(0%,red),color-stop(100%,blue));background-image:-moz-linear-gradient(red,blue);background-image:-webkit-linear-gradient(red,blue);background-image:linear-gradient(red,blue);}正如我们所看到的，Compass是一个非常方便的工具，它允许我们自定义输出。然而，这可能会变得比必要的工作更多。

在得出Compass是否是我们的最佳解决方案之前，有一些事情需要考虑：

-prefix-free是由LeaVerou创建的JavaScript文件。当浏览器调用该脚本时，它会检测到，然后将该浏览器特定的前缀添加到CSS中。-prefix-free文件足够智能，可以确定需要哪些前缀，并且只注入那些前缀。

使用-prefix-free很简单。只需调用JavaScript文件。根据LeaVerou的建议，最好在样式表之后包含此脚本，以减少未样式内容的闪烁（FOUC）。

由于我们的HTML代码如此简短，我们可以遵循之前提到的提示：

让我们看一下在决定使用-prefix-free之前需要考虑的事项的简短列表：

有了这个列表，我们现在可以更好地做出一个更明智的决定，这将使项目、我们自己和我们的用户受益。

Autoprefixer是一个CSS后处理器，它使用CanIUse.com数据库为已编译的CSS文件添加供应商前缀。

术语后处理器意味着它在创建CSS之后（后）处理它。换句话说，如果我们有一个名为styles.scss的SCSS文件，当我们保存它时，该文件会被编译为styles.css。在那一刻，Autoprefixer获取生成的styles.css文件，打开它，为每个属性和值添加所有必要的供应商前缀，保存文件，并关闭它。此外，您还可以配置它创建一个新的单独文件。完成后，我们可以在我们的网站/应用程序中使用此文件。

这种方法相对于任何其他自动供应商前缀方法的主要优势是它使用CanIUse.com数据库；这意味着一旦浏览器供应商不再需要其前缀用于CSS属性或值，我们只需通过Autoprefixer运行我们的CSS文件，它将在几秒钟内更新。

Autoprefixer的主要缺点是它有太多的使用方式，对一些人来说可能有点压倒性。举几个例子，我们可以通过命令行使用它，但首先需要安装Node.js：

npminstall--globalautoprefixerautoprefixer*.css我们也可以在Compass中使用Autoprefixer，但首先需要安装Ruby：

geminstallautoprefixer-rails我们可以在Mac上使用CodeKit，在Windows/Mac/Linux上使用Prepros或KoalaApp。我们还可以为SublimeText、Brackets或AtomEditor安装插件。还有Grunt和Gulp插件。

在决定使用Autoprefixer之前，让我们看一下需要考虑的事项的简要清单：

是的，它是三个e的Pleeease。Pleeease也是一个类似Autoprefixer的CSS后处理器，它也依赖于已安装的Node.js。它只能通过命令行运行，但实际上非常简单。Pleeease使用Autoprefixer，这意味着它也使用CanIUse.com数据库来定义哪些CSS属性和/或值需要前缀。

安装Pleeease后，我们需要创建一个配置文件（JSON文件），其中我们需要定义的最重要的事情是源CSS文件和目标CSS文件：

{"in":"style.css","out":"styles.fixed.css"}一旦我们设置了配置文件，我们在命令行中运行这个命令：

pleeeasecompilePleeease获取style.css文件，添加所有必要的供应商前缀，并创建styles.fixed.css，这是我们在生产中使用的文件。

在这一点上，Pleeease还有其他重要的事情：

如果您习惯使用命令行和JSON文件，Pleeease可以成为您工具库中非常有用的一部分。如果您更喜欢远离命令行，也没关系；还有其他更友好的方法来自动添加供应商前缀。

在决定是否使用Pleeease自动添加供应商前缀之前，有一些需要考虑的事项：

Emmet使我们能够更快地编写CSS和HTML。它是文本编辑器的插件，如SublimeText、Coda、TextMate，甚至Dreamweaver。

Emmet以前被称为ZenCoding。

一旦Emmet插件安装在我们喜爱的文本编辑器中，我们在SCSS文件中输入以下内容：

.selector-a{-trf}提示-trf是CSS3属性transform的缩写。

然后我们在键盘上按下Tab，代码会自动更改为这样：

.selector-a{-webkit-transform:;-ms-transform:;-o-transform:;transform:;}我们只需要在缩写的开头加一个破折号(-)来添加供应商前缀。这告诉Emmet在按下Tab键时需要添加必要的供应商前缀。

在上一个例子中未定义变换值，因为我们想展示使用Emmet的结果。显然，我们最终需要添加这些值。

在决定是否使用Emmet自动添加供应商前缀之前，有一些事情需要考虑：

正如我们所见，以前用于自动添加供应商前缀的方法是各种各样的，从通过命令行使用的方法到让您在使用JavaScript解决方案之前找到特定模块导入的方法。

提到的所有功能中最重要的是Autoprefixer使用CanIUse.com数据库。这基本上是我们想要使用的，因为我们只需要编写CSS3属性和值，然后完全忘记供应商前缀，让Autoprefixer和CanIUse.com为我们添加它们。

幸运的是，已经有第三方应用程序安装了Autoprefixer。这意味着我们不需要通过命令行设置任何东西，也不需要安装插件，或者类似的东西。只需安装应用程序，激活Autoprefixer复选框，然后开始使用！

之前我们提到了几个应用程序：CodeKit、Prepros和Koala应用。它们基本上都做同样的事情，但它们在两个方面表现出色：

这两个功能对我们的工作流程有很大影响，使我们能够将精力集中在重要的事情上，比如RWD和更好的用户体验。

在决定使用第三方应用程序是否是添加供应商前缀的最佳解决方案之前，有一些事情需要考虑：

本书建议您使用CodeKit、Prepros或Koala应用程序来处理供应商前缀。这些应用程序不仅可以编译SCSS文件，还可以在保存这些SCSS文件时自动通过Autoprefixer运行它们。

所以让我们来看看Prepros，它可以在Windows、Linux和Mac等最流行的操作系统上运行。

使用命令行编译我们的SCSS文件真的并不那么困难：

--sasswatchscss:css这就是我们在命令行中需要做的一切，以便Sass监视/scss文件夹中的SCSS文件，并将它们编译到/css文件夹中。真的就是这么简单。

以前的情况是，每次我们需要在不同的项目上工作时，都需要运行这个命令。虽然我们可以用许多不同的方式来自动化这个过程，但有些人觉得使用命令行要么令人生畏，要么只是不必要的。

Prepros是一个面向网页设计师和开发人员的工具，涉及到常规工作流程的许多部分：编译、CSS前缀、实时刷新、JavaScript合并、文件最小化、图像优化、浏览器测试同步、为编译文件创建源映射、内置服务器、FTP等等。

在本书的范围内，我们将重点介绍它如何帮助我们在自动添加供应商前缀的同时编译我们的SCSS文件。

还有一种方法可以免费使用Prepros并享受应用程序的所有功能。不过，这是以不得不每5分钟左右关闭购买应用程序弹出窗口为代价的。

这是Prepros的当前欢迎界面（可能已经改变）：

还记得安装Sass时的步骤吗？我们创建了一个/Demo文件夹，并在其中创建了两个子文件夹/scss和/css？我们将把/Demo文件夹拖放到Prepros界面上：

一个悲伤的表情出现了，让我们知道项目是空的。这是真的，因为我们还没有向/scss文件夹中添加任何文件：

所以，让我们在/scss文件夹中创建一个.scss文件：

Prepros将自动检测新的styles.scss文件并将其编译为styles.css文件，保存在/css文件夹中。

单击styles.scss文件将显示文件的默认设置：

让我们修改一些设置，以便Prepros可以自动执行以下操作：

sourcemap是一个带有.map扩展名的文件，它与我们的CSS文件一起生成。这个映射文件包含了将我们的CSS文件的每一行链接到我们的SCSS文件和局部文件中相应行的必要信息。当我们需要通过任何现代网页浏览器的DevTools检查元素的样式时，这一点至关重要。

在输出样式部分，我们将把设置保留为Expanded。

四种输出样式之间的区别很简单：

这是传统的CSS样式，其中每个选择器、属性和值都在单独的一行上：

header{background:blue;}header.logo{float:left;}.container{float:right;}嵌套输出你可以看到第二个规则是缩进的，这意味着它属于header选择器：

header{background:blue;}header.logo{float:left;}.container{float:right;}紧凑输出所有规则都在一行中，如下所示：

header{background:blue;}header.logo{float:left;}.container{float:right;}压缩输出这是被压缩的版本，这是我们在生产中应该使用的版本：

header{background:blue;}header.logo{float:left;}.container{float:right;}就是这样。我们现在让Prepros运行。它将添加所有供应商前缀，并在我们保存时编译SCSS文件。让我们看看它的运行情况。

每次我们点击保存，Prepros都会在屏幕右下角显示以下对话框中的一个。

成功将给我们以下输出：

错误将给我们以下输出：

让我们拿出我们的styles.scss文件，然后添加一个需要一些供应商前缀的简单CSS规则。

当我们保存styles.scss文件时，Prepros会显示绿色/成功的对话框，并将我们的SCSS文件编译成styles.css。

这是编译后的文件，自动添加了所有前缀：

随着浏览器的发展，CSS3属性和值被标准化，越来越少的属性需要供应商前缀。我们的CSS文件应该反映这一点，这样我们就不会在样式表中填充不必要的前缀。

Prepros允许我们定义在应用前缀时要支持多少个旧版浏览器版本。步骤如下：

如果你看不到线性渐变属性在开头被加上前缀，尝试将值更改为非常高的值，比如40，这样它就会显示最后40个版本。保存你的SCSS文档，然后再次检查你的CSS文件。

就是这样。

在我们继续之前，有一点非常重要的说明。到目前为止，我们已经讨论了通过--watch标志使用命令行以及使用Prepros来编译我们的SCSS文件。请注意，只需要运行一个编译器。同时运行CMD和Prepros编译相同的SCSS文件是不必要的。

有许多方法可以创建一个Sassmixin来存放媒体查询：只有变量的mixin，为不支持媒体查询的旧版浏览器提供NoQueries回退的mixin，以及（对于Compass）插件，比如Breakpoint。还有其他技术，比如命名媒体查询。另一种技术是一个简单的三行mixin，可以用于我们想要的任何东西。

它们都很好，而且非常强大。然而，在本书的范围内，我们将专注于两种简单的方法，这将使我们能够高效，保持简单，并利用mixin的功能。

到目前为止，你学到的关于Sass的一切，特别是关于mixin的部分，都体现在创建一个用于存放RWD媒体查询的部分文件中。

请记住，部分文件是我们创建的用于存放SCSS片段的SCSS文件。它们的文件名以下划线符号开头，以.scss扩展名结尾。

命名媒体查询和断点的方法和网页设计师和前端开发人员一样多。每个人都有自己的方式和风格。

无论您使用哪种方法，重要的是开始使用Sassmixin来自动化这个过程。随着我们构建站点或应用程序并成为更好的网页设计师/前端开发人员，我们会发现其他解决方案可能效果更好。

有几种方法可以命名您的媒体查询mixin：

由于我们不知道我们的内容会在哪里中断，我们需要一个初始mixin，我们可以在构建响应式站点/应用程序时添加值，我们将从一些已知的、特定宽度的值开始。请理解这些值很可能会改变，并且会向这个mixin添加许多其他值。

我们将把这个文件命名为_mediaqueries.scss。媒体查询mixin看起来像这样：

//Mobile-first@mixinminw($point){@if$point==320{@media(min-width:20em){@content;}}@elseif$point==640{@media(min-width:40em){@content;}}@elseif$point==768{@media(min-width:47.5em){@content;}}}这是我们在主SCSS文件中使用mixin的方法：

header{width:50%;//Propertiesforsmallscreensbackground:red;@includeminw(640){width:100%;//Propertiesforlargescreensbackground:blue;}}这是mixin编译的结果：

首先，我们看到Sass风格的注释，描述这个mixin是为移动优先方法而设计的：

//Mobile-first然后，我们有开放的@mixin指令。这个指令包含mixin的名称minw，它是minimum-width的缩写。我们将保持这个名称简单，因为我们将经常输入它，所以输入minw比输入minimum-width更快，同时仍然保持有意义的术语。

括号中，我们有($point)参数，它将存储我们在定义要使用的断点时指定的值：

@mixinminw($point)然后，我们有一个开放的@if语句。记住我们说过Sass是一种编程/脚本语言吗？有什么比if-else语句更能代表编程语言呢？

@if语句后面是等于(==)320像素宽度的$point变量。两个等号(==)表示它绝对等于值，即320：

@if$point==320之后，我们有CSS@media指令，我们以前见过很多次。在这个指令中，我们以em为单位指定宽度，在这个例子中是20em。

@media(min-width:20em)然后，我们有@content指令，允许我们在括号之间放任何内容：

@media(min-width:20em){@content;}接下来是带有@else语句的$point变量，两个等号(==)和值640。如果定义的值是640而不是320，那么mixin可以继续使用这个特定的媒体查询，适用于640像素宽度。

@elseif$point==640这意味着640像素是40em：

@media(min-width:40em){@content;}最后，我们有相同的媒体查询结构，适用于768像素宽度。768像素等于47.5em。

在选择让内容定义断点的方法之前，请考虑以下几点：

这是许多前端开发人员喜爰的。这个mixin几乎与我们刚刚看到的那个相同；不同之处在于，它不是使用特定的宽度并知道这些宽度将改变并添加其他宽度，而是使用设备特定宽度的抽象名称，通常已经定义了断点列表。

这是这个mixin的样子：

//Mobile-first@mixinbreakpoint($point){@if$point==small{@media(min-width:20em){@content;}}@elseif$point==medium{@media(min-width:40em){@content;}}@elseif$point==large{@media(min-width:48em){@content;}}}这是我们如何使用它的方式：

header{width:50%;//Propertiesforsmallscreensbackground:red;@includebreakpoint(medium){width:100%;//Propertiesforlargescreensbackground:blue;}}这是编译后的样子：

header{width:50%;background:red;}@media(min-width:40em){header{width:100%;background:blue;}}在选择命名媒体查询方法之前，请考虑以下几点：

这是在处理媒体查询时推荐使用的mixin，它具有以下优点：

现在，考虑到我们的建议是让内容定义断点，这里是mixin：

@mixinmobileFirst($media){@media(min-width:$media/16+em){@content;}}就是这样——一个仅有三行的mixin。这是我们如何使用它的方式：

header{width:50%;//Propertiesforsmallscreensbackground:red;@includemobileFirst(640){width:100%;//Propertiesforlargescreensbackground:blue;}}这是它编译成的样子：

header{width:50%;background:red;}@media(min-width:40em){header{width:100%;background:blue;}}现在，你可能会问自己，“em值是从哪里来的？”

这很简单。我们将期望的宽度除以16。我们除以16的原因是因为16px是所有浏览器的默认字体大小。通过这样做，我们得到了以em单位为单位的值。

如果你想使用16px作为默认字体大小，请考虑以下示例：

如果你决定你的默认字体大小不是16px而是18px，那么同样的过程适用。将期望的宽度除以18px：

选择权在你手中。

我们所有的示例都将基于16px的默认字体大小。

在本章中，我们涵盖了很多内容，但最好的还在后面。我们学会了如何安装Sass以及如何让它监视我们的SCSS文件。我们还了解到有两种不同的语法：Sass和SCSS。我们现在知道任何CSS文件都是有效的SCSS文件，如果我们现在知道如何编写CSS，我们也知道如何编写SCSS。我们讨论了Sass的不同基本概念，如变量、mixin、参数、嵌套、部分文件、@import指令、源映射和Sass注释。

我们还学会了什么是供应商前缀和帮助自动化这个过程的不同方法。我们决定使用Prepros来执行以下任务：监视、编译SCSS文件和自动添加前缀。我们学会了创建一个部分文件来容纳我们的媒体查询mixin，名为_mediaqueries.scss。我们还学会了使用基本mixin来命名媒体查询的不同方法，这个mixin向我们展示了如何简单地处理媒体查询，同时遵循让内容定义断点的最佳实践。

在下一章中，我们将深入研究HTML5以及如何标记我们的内容以准备进行RWD。准备好你的浮潜装备！

许多人认为HTML是代码。嗯，不是的。HTML——任何版本的HTML——都是标记语言。

标记语言是一种可以被人类阅读和理解的计算机语言。它使用标签来定义内容的各个部分。HTML和XML都是标记语言。

为了更好地区分，编码语言涉及更复杂的抽象、脚本、数据库连接、通过复杂协议以某种形式传输数据等等。编码确实是一个神奇的世界。

HTML可以做到这一切，但它远没有那么复杂，更容易理解。

在本章中，我们将专注于标记内容背后的科学。内容可以以许多不同的形式呈现：文本、图像、视频、表单、错误消息、成功消息、图标等等。此外，特定类型的内容在浏览器中的行为或用户与之交互的方式将告诉我们应该将特定内容标记为什么类型的HTML元素。

我们的目标是尽可能地保持语义标记。语义标记基本上意味着我们使用HTML标签来描述特定内容是什么。保持语义标记有很多好处：

我可以给你的最好建议是在标记内容时倾听内容；它会和你交流。真的会。

我们将在本章中涵盖以下主题：

那么，现在我们可以使用哪些HTML元素，以确保我们的网站/应用在所有浏览器中都能正常显示呢？答案是所有元素。

2014年10月28日，W3C完成了HTML5标准。然而，所有主要浏览器多年来一直支持HTML5元素。

对我们来说，这意味着即使在W3C完成HTML5标准之前，我们已经可以使用任何HTML5元素。所以，如果你一直在使用HTML5构建网站/应用，继续使用吧；如果你还没有因为任何特定原因开始使用HTML5，那么现在是开始的时候了。

根据MozillaDeveloperNetwork(MDN)的定义：

以下是关于

元素的几个重要要点：

考虑以下例子：

Contentgoeshere

提示为了谨慎起见，使用HTML实体表示特殊字符，例如，和字符(&)是&，省略号字符(…)是…。

根据MDN的定义：

以下是关于

元素的几个重要要点：

“自包含”意味着如果我们将

元素及其内部内容移到另一个上下文中，所有内容都是不言自明的，不需要其他东西来理解。

Contentgoeshere