响应式网站设计规范 第1篇
Foundation ()是最流行的前端开发框架之一。它被许多知名公司使用，如 Pixar、华盛顿邮报、Warby Parker ()等。正如前面提到的，Foundation 附带了常见的网页组件和交互式小部件。在这里，我们将研究我们将用于网站的组件和小部件。
网格系统是框架的一个组成部分。它是使管理网页布局感觉轻松的一件事。Foundation 的网格系统包括可以通过提供的类适应窄视口大小的十二列。与我们在前几章中探讨的两个框架类似，网格由行和列组成。每个列都必须包含在行内，以使布局正确跨越。
在 Foundation 中，应用row类来定义一个元素作为行，并将元素应用columns或column类来定义为列。例如：
您还可以从columns中省略s，如下所示：
列的大小通过以下一系列类来定义：
small-{n}：这指定了小视口大小范围（大约 0 像素-640 像素）中的网格列宽度。
medium-{n}：这指定了中等视口大小范围（大约 641 像素-1,024 像素）中的网格列宽度。
large-{n}：这指定了大视口大小范围（大约 1,025 像素-1,440 像素）中的网格列宽度。
我们在前面的类名中给出的{n}变量代表从1到12的数字。一行中的列数之和不应超过12。
这些类可以在单个元素中结合应用。例如：
上面的示例在浏览器中产生以下结果：
调整视口大小，使其足够小，以便列的宽度根据分配的类进行调整。在这种情况下，每个列的宽度相等，因为它们都分配了small-6类：
通常，您可以通过拖动浏览器窗口来调整视口大小。如果您使用 Chrome，可以激活设备模式和移动模拟器()。或者，如果您使用 Firefox，可以启用响应式设计视图(_Design_View)，这将允许您调整视口大小，而无需拖动 Firefox 窗口。
按钮对于任何类型的网站都是必不可少的，我们肯定会在网站的某些地方添加按钮。Foundation 使用button类来定义一个元素作为按钮。您可以将该类分配给元素，例如和。该类应用了默认的按钮样式，如下面的屏幕截图所示：
此外，您可以包含其他类来定义按钮的颜色或上下文。使用secondary、success、alert中的一个类来设置按钮颜色：
您还可以使用tiny、small或large中的一个类来指定按钮大小：
使用radius和round中的一个类使按钮更漂亮，带有圆角：
[外链图片转存中…(img-l3LDV7Ep-1722442935060)]
还有一些类来形成按钮。此外，Foundation 还提供多种类型的按钮，如按钮组、分割按钮和下拉按钮。因此，您可以转到 Foundation 文档的按钮部分，了解更多信息。
网站上一个重要的部分是导航。导航帮助用户从一个页面浏览到另一个页面。在这种情况下，Foundation 提供了几种导航类型，其中之一称为顶部栏。Foundation 的顶部栏将位于网站的顶部，任何内容或部分之前。以下是 Foundation 默认样式下顶部栏的外观：
响应式网站设计规范 第2篇
我们刚刚完成了本书的第二个项目。在这个项目中，我们使用 Bootstrap 构建了一个作品集网站。Bootstrap 使得使用提供的快速插入类来构建响应式网站和网站组件变得简单快捷。
此外，我们还使用了一个名为 Jasny Bootstrap 的 Bootstrap 扩展，以包括侧栏导航，这是原始 Bootstrap 中缺少的流行响应式设计模式之一。在网站样式方面，我们使用了 LESS，这是一种 CSS 预处理器，可以让我们更有效地编写样式规则。
总之，在这个项目中我们做了很多事情来让网站正常运行。希望你在这个过程中学到了很多东西。
在下一章中，我们将使用 Foundation 框架开始本书的第三个项目。敬请关注！
响应式网站设计规范 第3篇
在这个时代，许多人都与互联网连接，拥有一个网站对于任何规模的公司都变得至关重要——无论是小公司还是拥有数十亿美元业务的财富 500 强公司。因此，在本书的第三个项目中，我们将为企业构建一个响应式网站。
构建网站时，我们将采用一个名为 Foundation 的新框架。Foundation 是由总部位于加利福尼亚的 Web 开发机构 ZURB 开发的。它是一个精心打造的框架，具有一系列交互式小部件。在技术方面，Foundation 样式是建立在 Sass 和 SCSS 之上的。因此，在项目进行过程中，我们也将学习这个主题。
为了开展这个项目，首先让我们假设你有一个商业理念。这可能有点夸张，但这是一个可能会变成数十亿美元业务并改变世界的杰出理念。你有一个很棒的产品，现在是建立网站的时候了。你非常兴奋，迫不及待地想要改变世界。
所以，话不多说，让我们开始这个项目。
本章将主要围绕 Foundation 展开，我们将在此讨论的主题包括：
在线框架中检查网站设计和布局
研究 Foundation 的特性、组件和附加组件
管理项目目录和资产
通过 Bower 获取 Foundation 包
构建网站 HTML 结构
响应式网站设计规范 第4篇
但愿没有人相信这个“神话”。经验丰富的设计师都明白，世界上不存在真正的好模型，特别是在这样一个高速发展的时代。加载时间慢总会被人抱怨，然而我们已经实现了跨多个设备的流畅展示，60%的用户用移动设备接入互联网，手机版网站和响应式网页都会在未来被需求客户所使用。
四川-阿坝州青羊区太升南路288号 锦天国际A座10楼
028 86922220 (工作日) 1898082 0575 ( 7x24 )
244261566 (售前) 631063699 (售后)
service@ (业务) hr@ (求职)
在线咨询
拨打电话
响应式网站设计规范 第5篇
Retina 或高清（HD）显示使屏幕上的所有内容看起来更清晰，更生动。但问题在于在高清显示出现之前带来的传统图像或网络图标。这些图像通常作为位图或光栅图像提供，并且在这个屏幕上变得模糊，如下面的屏幕截图所示：
一系列在视网膜显示器上模糊的图标
我们不希望这种情况发生在我们的网站上，因此我们将不得不使用更可伸缩并在高清屏幕上保持清晰的字体图标。
说实话，Bootstrap 附带了一个名为 Glyphicon 的字体图标集。遗憾的是，它没有我们需要的社交媒体图标。在浏览了许多字体图标集之后，我最终选择了 Ionicons（）。在这里，我们将使用由 Lance Hudson 开发的带有 LESS 的替代版本（），因此我们将能够与 Bootstrap 无缝集成，后者也使用 LESS。
响应式网站设计规范 第6篇
A2: 测试响应式网站设计效果的方法有多种，包括：
浏览器内置工具：大多数现代浏览器都有内置的工具来模拟不同设备的屏幕尺寸。
开发者工具：使用Chrome或Firefox的开发者工具可以模拟不同设备和分辨率。
在线模拟器：使用在线服务如BrowserStack进行跨设备测试。
实物测试：实际在多种设备上测试网站，以确保真实环境下的表现。
自动化测试工具：使用Selenium等自动化测试框架进行跨设备兼容性测试。
响应式网站设计规范 第7篇
在前一章中，我们使用 HTML5 和一些 Bootstrap 插入类构建了作品集网站的结构。你可能已经看到，网站还没有装饰。我们还没有编写自己的样式或将样式表链接到页面上。因此，本章的重点将放在网站装饰上。
Bootstrap 主要使用 LESS 来生成其组件的样式。我们将遵循其步伐，也使用 LESS 来为作品集网站设计样式。LESS 带来了许多功能，如变量和混合，这将使我们能够编写更精简和高效的样式规则。最终，你会发现使用 LESS 来定制和维护网站样式比纯 CSS 更容易。
此外，我们还使用了一个名为 Jasny Bootstrap 的 Bootstrap 扩展来将侧栏导航包含到作品集网站中。在这个阶段，侧栏导航不会发生任何变化；我们只是设置了 HTML 结构。因此，在本章中，除了编译网站样式，我们还将编译 Bootstrap 和 Jasny Bootstrap 的 JavaScript 库，以使侧栏导航功能正常。
在本章中，我们将讨论许多内容，包括以下主题：
学习基本的 LESS 语法，如变量和混合
使用 LESS 的@import指令整理样式表引用
配置 Koala 以将 LESS 编译为常规 CSS
查看源映射以调试 LESS
使用 LESS 编写网站自定义样式
将 JavaScript 编译为静态 CSS 以激活侧栏导航
响应式网站设计规范 第8篇
让我们按照以下方式添加基本的 HTML5 结构：
此部分的列划分是指网站线框图中显示的布局。因此，正如您从刚刚添加的代码中看到的那样，每个功能列表项都分配了medium-6列，因此每个项目的列宽将相等。
我们只是按照 Foundation 指南构建了网站内容和部分的 HTML 标记。我们还在途中添加了额外的类，以便稍后自定义 Foundation 默认样式。
自从构建 HTML 标记以来，我们还没有添加任何样式；此时的网站看起来是白色和简单的，如下面的屏幕截图所示：
我们刚刚添加的 HTML 的完整代码也可以在找到。
本章有效地开始了我们的第三个项目。在这个项目中，我们使用 Foundation 为一家初创公司构建网站。我们浏览了 Foundation 的特性，并将其中一些特性应用到了网站中。不过，本章中我们只添加了网站的 HTML 结构。此时的网站看起来仍然是白色和简单的。我们需要编写样式来定义网站的外观和感觉，这正是我们将在下一章中做的事情。
我们将使用 Sass 来编写网站样式，Sass 是 CSS 预处理器，也定义了 Foundation 基本样式。因此，在下一章的开始，我们将首先学习如何使用 Sass 变量、混合、函数和其他 Sass 特性，然后再编写网站样式。
看起来还有很多工作要做才能完成这个项目。因此，话不多说，让我们继续下一章吧。
响应式网站设计规范 第9篇
让我们通过组织项目目录和包括依赖项、图像和字体图标在内的资产来开始项目。
什么是依赖关系？这里的依赖关系是指运行项目和构建网站所需的文件或文件包，如 CSS 和 JavaScript 库。
在这个项目中，我们将实践使用 Bower（）来组织项目的依赖关系。Bower，正如我们在第一章中简要提到的那样，响应式 Web 设计，是一个前端包管理器，简化了安装、移除和更新前端开发库（如 jQuery、Normalize 和 HTML5Shiv）的方式。
响应式网站设计规范 第10篇
本章开始了本书的第二个项目。我们正在使用最流行的前端开发框架之一 Bootstrap 构建一个投资组合网站。我们还探索了一个名为 Bower 的新的引人注目的网页开发工具，它简化了网站依赖管理。
它们都是工具的绝佳组合。Bootstrap 让我们可以快速使用模块化组件和可重用类构建响应式网站，而 Bower 使项目更易于维护。
在下一章中，我们将更多地处理 LESS 和 JavaScript 来装饰网站。