响应式网页设计教程 第1篇
请记住，虽然 Sublime Text 允许我们无限期免费评估，但有时可能会提示您购买许可证。如果你开始感到烦恼，请考虑购买许可证。
我最喜欢 Sublime Text 的一件事是 Package Control，我们可以方便地从 Sublime Text 中搜索、安装、列出和删除扩展。但是，Package Control 并不是 Sublime Text 的预装软件。因此，假设你已经安装了 Sublime Text（我认为你应该已经安装了），我们将在 Sublime Text 中安装 Package Control。
响应式网页设计教程 第2篇
在本章中，我们简要介绍了响应式网页设计背后的故事，以及视口元标签和 CSS3 媒体查询，这些构成了响应式网站。本章还总结了我们将使用以下框架来进行三个项目的工作：，Bootstrap 和 Foundation。
使用框架是快速建立响应式网站的更简单的方法，而不是从头开始构建所有内容。然而，正如前面提到的，使用框架也有一些负面影响。如果做得不好，最终结果可能会出现问题。网站可能会被填充并卡在不必要的样式和 JavaScript 中，最终导致网站加载缓慢且难以维护。
我们需要设置合适的工具；它们不仅会促进项目的进行，还将帮助我们使网站更易于维护，这就是我们将在下一章中要做的事情。
响应式网页设计教程 第3篇
HTML 最初是用来描述文档内容的手段，而不是为了使其外观上令人愉悦。
与传统的报纸或杂志等明显是为人类而设计的内容发布不同，网络既被人类阅读，也被搜索引擎和屏幕阅读器等机器阅读，这些机器帮助视觉受损的人浏览网站。因此，使我们的网站结构具有语义是非常鼓励的。语义标记使这些机器更好地理解内容，也使内容在不同格式下更易访问。
因此，HTML5 在使网络更具语义的使命中引入了一堆新元素。以下是我们将用于博客的元素列表：
除了新元素，我们还将在博客中添加一种特定的新输入类型，搜索。顾名思义，搜索输入类型用于指定搜索输入。在桌面浏览器中，您可能看不到明显的区别。您可能也不会立即看到搜索输入类型如何为网站和用户带来优势。
搜索输入类型将提升移动用户的体验。iOS、Android 和 Windows Phone 等移动平台已经配备了上下文屏幕键盘。键盘会根据输入类型而改变。您可以在下面的屏幕截图中看到，键盘显示了搜索按钮，让用户更方便地进行搜索：
HTML5 引入了一个名为placeholder的新属性。规范描述了这个属性作为一个短提示（一个词或短语），旨在在控件没有值时帮助用户进行数据输入，如下面的例子所示：
您会看到placeholder属性中的**在这里搜索…**显示在输入字段中，如下面的屏幕截图所示：
过去，我们依赖 JavaScript 来实现类似的效果。如今，有了placeholder属性，应用程序变得简单得多。
这些新的 HTML 元素使我们的文档标记更具描述性和意义。不幸的是，Internet Explorer 6、7 和 8 将无法识别它们。因此，无法应用到这些元素的选择器和样式规则；就好像这些新元素没有包含在 Internet Explorer 字典中一样。
这就是一个名为 HTML5Shiv 的 polyfill 发挥作用的地方。我们将包括 HTML5Shiv（）来使 Internet Explorer 8 及更低版本认识这些新元素。阅读 Paul Irish 的以下帖子（）了解 HTML5Shiv 背后的历史；它是如何发明和发展的。
此外，旧版的 Internet Explorer 无法渲染 HTML5 中的placeholder属性中的内容。幸运的是，我们可以使用一个 polyfill（）来模拟旧版 Internet Explorer 中placeholder属性的功能。我们以后也会在博客中使用它。
还附带了两个 polyfills，以启用 Internet Explorer 6、7 和 8 中不支持的某些功能。从现在开始，让我们把这些浏览器版本称为“旧版 Internet Explorer”，好吗？
第一个 polyfill 是通过名为的HTML 组件（HTC）文件提供的。
HTC 文件与 JavaScript 非常相似，通常与 Internet Explorer 专有的 CSS 属性behavior一起使用，以为 Internet Explorer 添加特定功能。 附带的文件将应用与 CSS3 box-sizing属性类似的功能。
在样式表中包含了文件，如下所示：
如上面的代码片段所示， 应用了box-sizing属性，并在通配符选择器中包含了文件。这个通配符选择器也被称为通配符选择器；它选择文档中的所有元素，也就是说，在这种情况下，box-sizing将影响文档中的所有元素。
文件路径必须是绝对路径或相对于 HTML 文档的路径，以使填充脚本起作用。这是一个技巧。这是我们强制使用的东西，以使旧版 Internet Explorer 表现得像现代浏览器一样。像上面的 HTC 文件一样使用并不符合 W3C 标准。
附带的第二个填充脚本是（），它将_神奇地启用_CSS3 以使其立即可用。无需配置；我们可以简单地在head标签中链接脚本，如下所示：
在上面的代码中，我们将脚本封装在
由于这个脚本只在 Internet Explorer 8 及以下版本中需要，我们用 Internet Explorer 条件注释
响应式网页设计教程 第4篇
XAMPP 适用于 Windows、OS X 和 Linux。从下载安装程序；根据您当前使用的平台选择安装程序。每个平台都有不同的安装程序和不同的扩展名；Windows 用户将获得.exe，OSX 用户将获得.dmg，而 Linux 用户将获得.run。按照以下步骤在 Windows 中安装 XAMPP：
启动 XAMPP.exe安装程序。
如果 Windows 用户帐户控制提示是否允许以下程序更改此计算机？，请单击是。
当XAMPP 设置向导窗口出现时，单击下一步开始设置。
XAMPP 允许我们选择要安装的组件。在这种情况下，我们的 Web 服务器要求是最低限度的。我们只需要 Apache 来运行服务器，因此我们取消其他选项。（注意：PHP选项是灰色的；它无法取消选中）：
确认要安装的组件后，单击下一步按钮继续。
将提示您安装 XAMPP 的位置。让我们将其保留在默认位置C:\xampp，然后单击下一步。
安装完成后，您应该会看到窗口上显示安装 XAMPP 的设置已经完成。单击完成按钮以完成流程并关闭窗口。
按照以下步骤在 OS X 中安装 XAMPP：
对于 OS X 用户，打开 XAMPP.dmg文件。一个新的Finder窗口应该出现，其中包含实际的安装程序文件，通常命名为xampp-osx-*-installer（星号（*）代表 XAMPP 版本），如下图所示：
双击安装程序文件开始安装。XAMPP 需要您的计算机凭据来运行安装程序。因此，请输入您的计算机名称和密码，然后单击确定以授予访问权限。
然后会出现XAMPP 设置向导窗口；单击下一步开始设置。
与 Windows 列出每个项目的组件不同，OS X 版本只显示两个组件，即XAMPP 核心文件和XAMPP 开发人员文件。在这里，我们只需要XAMPP 核心文件，其中包括我们需要运行服务器的 Apache、MySQL 和 PHP。因此，取消选择XAMPP 开发人员选项，然后单击下一步按钮继续。
响应式网页设计教程 第5篇
执行以下步骤在 Windows、OS X 和 Ubuntu（Linux）中安装 。您可以直接跳转到您正在使用的平台的部分。
执行以下步骤在 Windows 中安装 ：
32 位或 64 位
运行安装程序（.exe或.msi文件）。
单击 欢迎消息的下一步按钮。
通常情况下，当您安装软件或应用程序时，您将首先收到应用程序的许可协议提示。阅读完许可协议后，单击我接受许可协议中的条款，然后单击下一步按钮继续。
然后，系统会提示您选择 应安装的文件夹。将其保留为默认文件夹，即C:\Program Files\nodejs\。
如下截图所示，安装程序然后会提示您是否要自定义要安装的项目。将其保留原样，然后单击下一步按钮继续，如下截图所示：
然后，单击安装按钮开始安装 。
安装过程非常快速；只需几秒钟。如果看到通知显示 已成功安装，则可以单击完成按钮关闭安装窗口。
执行以下步骤在 OS X 中安装 ：
下载 OS X 的 安装程序，其扩展名为.pkg。
安装程序将向您显示欢迎消息，并显示将安装 的位置（/usr/local/bin），如下截图所示：
然后，安装程序会显示用户许可协议。如果您已阅读并同意许可协议，请单击同意按钮，然后单击下一步按钮。
OS X 的 安装程序允许您在安装到计算机之前选择要安装的 功能。在这里，我们将安装所有功能；只需单击安装按钮即可开始安装 ，如下截图所示：
如果要自定义 安装，请单击左下角的自定义按钮，如前面的截图所示。
执行以下步骤在 Ubuntu 中安装 ：
在 Ubuntu 中安装 非常简单。 可以通过 Ubuntu 的高级打包工具（APT）或apt-get安装。如果您使用的是 Ubuntu 版本或更高版本，可以启动终端并依次运行以下两个命令：
如果您使用的是 Ubuntu 或更早版本，请改为运行以下命令：
我们刚刚安装了 和npm命令，这使我们能够稍后通过 软件包管理器（NPM）使用 Bower。npm命令行现在应该可以通过 Windows 命令提示符或 OS X 和 Ubuntu 终端访问。运行以下命令测试npm命令是否有效：
此命令返回计算机中安装的 NPM 版本，如下截图所示：
此外，对于 Windows 用户，您可能会在命令提示符窗口顶部看到一条消息，显示您的环境已设置为使用 和 npm，如下截图所示：
这表明您可以在命令提示符中执行node和npm命令。由于我们已经设置了 和npm正在运行，现在我们将安装 Bower。
在本书中，我们将使用许多命令行来安装 Bower 以及 Bower 包。然而，如果您像我一样来自图形设计背景，在那里我们主要使用图形应用程序，第一次操作命令行可能会感到非常尴尬和令人生畏。因此，我建议您花时间熟悉基本的命令行。以下是一些值得参考的参考资料：
响应式网页设计教程 第6篇
在上一章中，我们安装了一些软件，这些软件将为我们的项目提供便利。在这里，我们将开始我们的第一个项目。在这个项目中，我们将构建一个响应式博客。
拥有博客对于一家公司来说是必不可少的。甚至一些财富 500 强公司，如联邦快递()，微软()和通用汽车()都有官方企业博客。博客是公司发布官方新闻以及与客户和大众联系的重要渠道。使博客具有响应式设计是使博客更易于读者访问的途径，这些读者可能通过手机或平板等移动设备访问网站。
由于我们在这个第一个项目中要构建的博客不会那么复杂，所以这一章对于刚接触响应式网页设计的人来说是一个理想的章节。
那么让我们开始吧。
总之，在本章中，我们将涵盖以下主题：
深入了解 组件
审查博客蓝图和设计
整理网站文件和文件夹
查看 HTML5 元素以进行语义标记
构建博客标记