内容
- 入门工具
- 01.响应式网页设计草图
- 02.响应式设计速写本
- 03.响应式线框
- 04.多设备布局模式
- 05.瓷砖
- 灵活/流体网格的工具
- 06.金色网格系统
- 07. Foldy960
- 08. SimpleGrid
- 09. 1140px CSS网格
- 10.列式CSS网格系统
- 11.语义网格系统
- 12. SUSY
- 13. Gridpak
- 14.网格集
- 15.更好的RWD Photoshop网格
- 16.流体网格
- 17.响应式计算器
- 响应式图像（和文本）的工具
- 18.响应式图像
- 19.自适应图像
- 20. Sencha.io Src（以前称为Tinysrc）
- 21. FitText
- 22. slabText
- 媒体查询工具
- 23. Respond.js
- 24. CSS3-Mediaqueries.js
- 25. Adapt.js
- 26.类别
- 响应式设计（和移动式）样板
- 27. 320及以上
- 28.无网格
- 29.骨架
- 30.引导程序
- 插件，垫片和填充胶
- 31.响应式插件
- 32.推翻
- 33. MediaTable
- “测试，测试：1-2-3 ...”
- 34. resizeMyBrowser
- 35.响应像素
- 36.响应式设计测试
- 37.响应者
- 38.响应式
- 39.屏幕查询
- 40.阿普图斯
- 41.响应式设计书签
- 42.响应式设计测试书签
- 43.萤火虫
- 44.媒体查询指示器
- 45.沉
- 46.驶入
- 47. Adobe阴影
- 48. Opera移动仿真器+远程调试
- 进一步的启发
- 49.媒体查询
- 50. @ RWD
- 喜欢这个吗？阅读这些！
正如Ethan Marcotte在他的文章“ Responsive Web Design”以及他的畅销书中所介绍/创造的那样，使网站具有响应能力需要三个要素：
- 柔性/流体网格
- 响应式图像
- 媒体查询
还有很多其他很棒的文章，涵盖了有关响应式Web设计的动机，概念和技术，因此，我们将把本文的重点放在一些顶级工具上，这些工具将帮助您以负责任的态度进行响应。
入门工具
在开始构建网站之前，最好先勾画出页面上的元素将如何适应各种浏览器尺寸，以适应将要查看的各种设备，并避免经常因主要考虑而造成的脱节。桌面设计和其他响应式迭代作为事后的想法（尤其请参见Stephanie（Sullivan）Rewis的评论）。
01.响应式网页设计草图
杰里米·P·阿尔福德（Jeremy P Alford）撰写的这套自适应素描纸是开始绘制页面部分在不同分辨率下的移动方式的一个很好的起点。
02.响应式设计速写本
如果您希望将所有草图都放在一个位置，那么您可能要考虑由App Sketchbook公司制作的这本线装书，其中包含50张响应式草图。
03.响应式线框
建立响应式网站的困难之一是使用线框来显示响应式设计将如何工作。 Adobe的James Mellers组合了这个实验工具，以展示复杂布局的响应式线框图如何工作。
04.多设备布局模式
在计划响应式设计时，先了解其他人如何使用它是很有用的，因此，Luke Wroblewski的“多设备布局模式”（Multi-Device Layout Patterns）列出了流行的模式以及示例链接，是一个不错的起点。
05.瓷砖
萨马纳莎·沃伦（Samanatha Warren）的风格瓷砖为响应时代的设计提出了一种新技术。而不是固定宽度的设计模型，它们就像是色板或情绪板，它们在不涉及细节的情况下显示了一般的设计方法。
灵活/流体网格的工具
如前所述，响应式设计所需的第一个组件是柔性/流体网格。以下内容已预先构建：您只需下载它们，即可快速访问响应速度更快的网站。
06.金色网格系统
还开发了Less Framework的Joni Korpi最近发布了此新版本的可靠网格系统，用于响应式设计。 Golden Grid System被认为是“折叠”的，因为它可以轻松地从16列到8列适应四列，还具有一个小的浏览器覆盖层，可以在您的页面上显示网格以进行测试。
07. Foldy960
Paravel，Inc.有才华的绅士发布了经过修改的960.gs网格，他们将其用作响应项目的基础。
08. SimpleGrid
Conor Muirhead编写的SimpleGrid内置了响应能力，因此可以轻松地启动并运行您的响应网站项目。
09. 1140px CSS网格
另一个出色的响应式网格系统是墨尔本设计师Andy Taylor编写的1140px CSS网格，它从较宽的桌面分辨率到移动分辨率。
10.列式CSS网格系统
由Pulp + Pixels（又名创意总监）Nick Gorsline创建的Columnal网格系统基于1140px网格系统，但还具有一些额外的优点，例如带有素描表和线框图模板的设计套件以及CSS调试样式。
11.语义网格系统
经过预处理的CSS扩展（例如Sass和LESS）正变得越来越流行，Tyler Tate的语义网格系统使用它们在此网格系统中发挥了最大作用，该网格系统声称不使用不必要的类或元素。欲了解更多信息，请访问coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-morrow/。
12. SUSY
就像语义网格系统一样，Oddbird的SUSY创建了一个不使用额外标记或特殊类的网格系统，但SUSY仅针对Sass（及其扩展名Compass）的用户。
13. Gridpak
由Erskine Design设计的Gridpak是周围最新的响应式网格生成器之一。它使您可以在多个断点处设置列和装订线，然后输出CSS，JavaScript和PNG文件，以便整个团队从同一起点开始工作。
14.网格集
在Gridset上仍然有一些神秘感，因为在我撰写本文时，它实际上尚未发布。但是Mark Boulton Design的工具承诺提供定制的，非强制性的网格系统，以及一种在线保存和管理网格的方法。
15.更好的RWD Photoshop网格
艾略特·杰伊·斯托克斯（Elliot Jay Stocks）建议放弃旧的960px事实上的网格标准，而改以1000px为基础，使所有百分比计算更易于使用。如果您同意，他已为您制作了一个PSD，供您开始使用。
16.流体网格
如果您的设计高度专业化，并且需要创建自己的自定义网格，则可以使用.net Awards杰出的新人提名人Harry Roberts的流体网格计算器来实现。
17.响应式计算器
另一个像素百分比计算器，但是Stu Robson的这个像素计算器为您生成了所有CSS规则，比其他计算器更进一步，这意味着您可以将它们复制并粘贴到样式表中。
响应式图像（和文本）的工具
响应式网页设计的另一个关键组成部分是流畅的图像。尽管获得流畅图像的技术很简单，但优化不同设备的性能和页面加载似乎是响应式Web设计中的最大挑战之一。这里有一些解决问题的资源。
18.响应式图像
灯丝小组设计了一种基于屏幕分辨率发送适当大小的图像的方法。此实验采用响应优先和负责任缩放的移动优先图像，要求有两个不同大小的图像作为参考。
19.自适应图像
马特·威尔科克斯（Matt Wilcox）从“响应图像”工具中汲取了灵感，创建了“自适应图像”，它使用PHP和一些JavaScript将适当的图像提供给用户的设备，而无需任何额外的标记。
20. Sencha.io Src（以前称为Tinysrc）
Sencha提供了一种云服务，可根据请求的设备大小发送优化版本的托管映像。要了解如何使用它，请参阅docs.sencha.com/io/src/。
21. FitText
Paravel，Inc的另一个亮点是FitText.js，这是一个jQuery插件，用于使标题网页类型响应设计和设备。有关详细信息，请参阅trentwalton.com/2011/05/10/fit-to-scale/。
22. slabText
受到FitText和SlabType算法的启发，Brian McAllister的slabText是一个jQuery插件，它使粗体文本块能够在保持定义的宽度的同时进行响应式调整大小。
媒体查询工具
现在，您已经了解了如何针对不同的设备，流畅的网格和流畅的图像更改布局，您需要进行媒体查询才能将页面的元素转换为响应状态。
23. Respond.js
响应式设计的一个问题是，无法读取媒体查询的浏览器被抛在后面。这可能不是目标受众的问题，但在旧版本的浏览器中容纳用户仍然是一个好习惯。 Scott Jehl撰写的Respond.js仅支持属性min-width和max-width。
有关更多信息，请参见filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/。
24. CSS3-Mediaqueries.js
Wouter van der Graaf的CSS3-Mediaqueries.js使IE和其他浏览器的旧版本可以有效地测试和应用各种媒体查询。
25. Adapt.js
最初的960.gs网格系统的作者内森·史密斯（Nathan Smith）已编写了Adapt.js，该脚本可检测浏览器尺寸并仅提供所需的样式表（例如媒体查询，但不提供媒体查询），这意味着它也可以在较旧的浏览器中使用。
26.类别
这是从相反的角度进行设备检测的方法– Brett Jankord的Categorizr脚本假定设备可以移动，除非将其检测为台式机或平板电脑，从而使您能够以同情的方式向浏览器提供资源。
响应式设计（和移动式）样板
秉承高效的响应式工作流程的精神，样板可简化将设计移至浏览器的过程，这一点要早于以后。这些样板文件中的大多数样板将上面提到的最好的工具组合到一个整齐的程序包中：一个灵活的网格，通过脚本进行了增强，同时实现了移动优先，内容输出的理念。
27. 320及以上
安迪·克拉克（Andy Clarke）的320 and Up是移动优先的样板，它与许多其他现代Web设计工具集成在一起，例如LESS和Bootstrap（请参阅＃30）。这是使站点快速启动和运行的一种轻巧而灵活的方法。另外，请查看我们对Andy的采访，他在采访中向我们介绍了有关新版本的更多信息。
28.无网格
Gridless是HTML5和CSS3的样板，可以用作响应式设计的基础，重点是版式和内置的跨浏览器兼容性。
29.骨架
与前两个样板的起始点具有最小的分辨率不同，由Dave Gamache创建的Skeleton开发套件基于960.gs网格系统，并且可以缩小到移动版。 Skeleton还拥有一个很棒的样式框架，供开发人员在其之上构建样式。
30.引导程序
Bootstrap由Twitter构建，现已开源。Bootstrap是一个框架和一系列组件，用于使网站快速上线，从版本2开始，其所有核心部分都可以响应地工作。
插件，垫片和填充胶
尽管现代的浏览器和软件倾向于提高响应速度，但有时我们必须使用额外的工具来提供一致的体验。
31.响应式插件
Marios Lublinski已编写了WordPress插件，该插件有望将当前的WP主题转变为响应主题。我还不知道它是如何工作的，因为在撰写本文时尚未发布它，但是如果它能兑现其诺言，那将是非常有用的。
32.推翻
内容溢出处理在桌面浏览器上可以很好地工作，但是较旧的移动浏览器却不一致地处理它。勤奋的Filament Group的Overthrow polyfill可以在各种设备之间持续稳定地降级，以确保所有移动用户都能获得最佳体验。
33. MediaTable
Marco Pegoraro的jQuery插件MediaTable与Respond.js一起使用可帮助您解决以下问题：如何在小屏幕设备上显示大型数据表，创建响应列并在适当的地方添加显示/隐藏切换。
“测试，测试：1-2-3 ...”
响应式工作流程的另一个方面是了解您的目标设备和分辨率，然后在其中进行测试。
34. resizeMyBrowser
前端开发人员Chen Luo的resizeMyBrowser具有多个预设尺寸供您的浏览器窗口使用，以测试响应式设计的页面或在找不到适合您需求的页面时创建一个新的预设。
35.响应像素
就像resizeMyBrowser一样，Remy Sharp构建的响应像素将页面加载到窗口中，您可以在其中测试宽度和高度，以确定媒体查询的触发效果以及断点在设计中的位置。
36.响应式设计测试
由设计师和开发人员Matt Kersley创造的非常有用的工具：只需在“响应式设计测试”中输入响应式网站的URL，即可查看其在各种浏览器尺寸下的呈现方式。
37.响应者
输入一个URL，然后响应者将向您展示它如何在许多常见的设备尺寸中显示-具有无情的机器人效率。塔玛·普格斯利（Tama Pugsley）和安迪·霍维（Andy Hovey）对此负责。
38.响应式
另一个页内设备模拟器Responsive.is允许您键入URL，然后在一系列不同的预设之间快速调整其大小。它是由即将推出的Typecast应用背后的团队完成的。
39.屏幕查询
还有一个浏览器尺寸工具，但是Mandar Shirke的Screenqueri.es通过拥有广泛的移动和平板电脑预设集以及网格和标尺（使精确测量变得容易得多）而与众不同。
40.阿普图斯
另一个用于测试多个定义大小的站点的应用程序，但是Aptus是Mac本地的。它可以通过Mac App Store获得，并且本机提供了额外的功能，例如简单的屏幕截图和脱机支持。
41.响应式设计书签
Victor Coulon制作了一个非常简单但有效的书签。当您在任何网页上激活它时，它会添加一个工具栏，使您可以在四个常用屏幕尺寸之间进行切换，从而可以看到网站以不同大小呈现的方式。
42.响应式设计测试书签
本杰明·基恩（Benjamin Keen）制作的此书签使您可以定义自己的设备大小，并根据需要选择任意数量或更多数量，从而实现更多自定义。激活后，它会以所有选定的大小并排显示站点，以便于比较。
43.萤火虫
由QuirkTools开发的Screenfly可让您在台式机，平板电脑，手机和电视上以不同的分辨率测试网站。目前，桌面测试仅限于Safari，而平板电脑和移动设备针对设备和浏览器提供了更多选择。电视仅限于歌剧。
44.媒体查询指示器
Johan Brook提供了一种纯CSS的方法来测试浏览器何时触发了媒体查询。媒体查询指示器是另一个用于测试和处理设计突破点的好工具。
45.沉
Shim是Node.js应用程序中的一种工具，是重新设计RWD运动的先驱波士顿环球报（Boston Globe）所使用的工具之一，它可以在同一Wifi网络上的多个设备上运行网页，从而使跨设备测试变得更加容易。
46.驶入
如果没有运行Shim的Node.js服务器，Scott Jehl会制作一个称为Drive-In的简单版本，该版本的工作原理基本相同，但使用PHP，Apache和.htaccess文件。
47. Adobe阴影
Adobe通过此远程调试工具继续推动Web技术的发展。在Mac或Windows上安装Shadow和Chrome扩展程序，在Android或iPhone上安装Shadow客户端，即可在许多不同的设备之间共享网页。
48. Opera移动仿真器+远程调试
调试移动页面的一种更简便的方法是安装Opera和Opera Mobile Emulator，然后将二者与它们的“远程调试”选项连接起来。设置简单，快速，并且具有在WebKit之外进行更多测试的附加好处。
进一步的启发
是否想了解其他人如何使他们的设计具有响应性？
49.媒体查询
如果您还没有看到它，则该网站Mediaqueri.es的站点数量已经越来越多，已经过渡到响应方。
50. @ RWD
Ethan Marcotte经营着一个Twitter帐户，其中包含RWD世界的最新新闻，工具和展示。
丹妮丝·雅各布斯（Denise Jacobs）崇尚演讲，作家，网页设计培训师和创造力的传播者，而彼得·加斯顿（Peter Gasston）是CSS3的书的作者，也是一位资深的网络开发人员，曾在Broken Links上发表博客。
喜欢这个吗？阅读这些！
- 建立行动网站的专业提示
- 顶级CSS和JavaScript技术
- 如何建立应用程式
- 设计师最好的免费网络字体
- 探索增强现实的下一步
- 下载免费纹理：高分辨率，可以立即使用
