所以，你决定冒险去创造响应网页设计．太棒了!随着移动设备、上网本、桌面等等的浏览领域的多样化，响应式网页设计允许网页设计师为特定设备提供不同的布局(基于屏幕大小和浏览器功能)，为网站访问者提供最佳的用户体验。
10个响应性最好的网页设计工具
所以现在，你已经确定创建响应式网页设计是有益的。什么工具可以帮助你完成工作?工具已经开始涌现，为我们提供快捷方式和帮助响应网页设计任务。
让我们来看看我认为最有用的几个。我将清单中的工具分为四类:
- 负责排版
- 灵活的图像
- 响应式网页布局
- 测试和跨浏览器支持
负责排版
首先，让我们看看两种工具(众多工具中的一种)，它们可以让我们创建漂亮的、自适应的字体。
1.Lettering.js
Lettering.js,jQuery插件控制你的网页类型的外观，是一个伟大的工具，帮助设计师得到他们的排版．无论你是否在做响应式网页设计，对你的网页类型有这样的控制，可以帮助你打造一个真正有创意的外观，而不用求助于基于图像的解决方案。在响应式设计的背景下，letters .js让设计师精确控制排版特征，如间距、前导和字距，以便在各种视觉空间中产生最佳的阅读体验。
2.FitText
另一个jQuery插件，FitText帮助你使你的标题响应。FitText确保您的显示文本在各种设备上显示最佳。这个插件可能很简单，但是它的灵活性让创意掌握在你的手中，并且很容易实现。
灵活的图像
设置完类型后，我们可以继续处理在响应式网页设计中放置图像的问题。有一个工具应该是每个响应式网页设计者的武器库的一部分。
3.imgSizer.js
在直接阅读imgSizer.js的代码之前，请务必通读伊桑马克特的崩溃这个脚本在你的响应式网页设计中扮演什么角色。从本质上说，这个脚本被设计用来确保你的图像在Microsoft Windows中清晰地呈现。Marcotte的脚本在清理浏览器自动缩小的图像方面做得很好。
响应式网页布局
每个响应式网页设计的核心都是一个流畅而灵活的布局，它能适应用户浏览器的屏幕大小和功能。让我们转向与布局相关的资源，在响应式网页设计中，大多数动作都发生在布局中。
4.流体960网格系统
如果你一直在用无处不在的960网格系统通过内森•史密斯(我们中的很多人可能在某个时候在项目或实验中使用过它)，看看这个对原始项目的流畅改编。如果你喜欢最初的960。gs，那么你已经知道如何使用流体960网格系统。
5.Gridless
如果网页布局的网格系统对你来说限制太大，那就试试Gridless。无网格系统比其他网格系统更精简，并考虑了响应式设计。无网格代码将其哲学建立在多次讨论的基础之上手机第一制作必须交付到多种设备环境的网站的方法。
对于寻求更基本的、以内容为中心的响应式网页设计方法的设计师来说，你可能会发现自己在Gridless中非常熟练。
6.PXtoEM
将固定宽度的设计工作转换为流体布局的一个繁琐的数学过程是转换绝对度量单位(即。px而且pt)变成相对的计量单位，例如ems和百分比(％)用于字体、间距、容器宽度等。PXtoEM是一个为用户提供简单转换工具的工具，以帮助他们解决所有的数学问题。
该网站还允许设计师快速、轻松地更改布局的基本字体大小，使其更易于管理。例如，在HTML文档中，设置您的身体元素的字体大小62.5%给你更方便的转换比率1em是10px，使单位转换更容易做。
测试和跨浏览器支持
最后，当我们创建我们的响应式网页设计时，我们将达到我们的网页类型是干净和自适应的，我们的图像是灵活的，我们的布局是流动的。现在我们需要确保我们的网站在尽可能多的浏览环境中工作。
7.Adobe设备中心
在不同设备上测试网站的最佳方法是在设备本身进行测试;没有什么比在一个特定的移动设备或电脑上看到你的网站的实际外观和行为更好的了。然而，对于我们这些没有预算购买数百个新设备的人来说，解决方案来自Adobe设备中心的形式。Device Central是我在不同设备上测试站点时使用过的较好的软件之一。
如果你想要的是产品的多样性和范围，Device Central不会让你失望。随着不断增长的设备库可供选择，用户将发现市场上几乎所有的主要设备，随时可以加载和测试。测试网站也变得很容易:只需输入网页的URI(本地或远程)，然后你就可以在你想要测试的设备之间自由切换。
8.Web开发人员
虽然Device Central(上图)比购买一堆设备便宜，但它可能仍超出了一些设计师的荷包范围。Web Developer浏览器扩展是一个极好的替代选择(或与Device Central一起的附加工具)。可用的Firefox和Chrome，这个扩展为设计师提供了几个工具，在开发响应或流体网站时派上用场。
最值得注意的是通过点击一个按钮来调整浏览器窗口大小的内置功能。新的大小预设可以立即保存和使用。
其他有用的功能包括按媒体类型查看CSS和概述包含的元素，我发现这有助于快速识别设计中的断点(或潜在断点)。
9.Respond.js
使用媒体查询的一个明显缺点是，它们是CSS3规范的一部分，因此在较老的浏览器(如IE8及以下)中是不存在的功能。当然，有人可能会说我们没有看到很多运行IE6的移动设备。但有一点需要注意的是，响应式网页设计不只是针对移动设备，它是一种针对所有类型的浏览情况进行优化的网站开发方法。例如，IE7或IE8用户可能仍然受益于一个在大型宽屏显示器和小屏幕上网本上呈现不同布局的网站。幸运的是，我们有response .js，这是一个轻量级的开源脚本，它为我们在IE6、7和8中执行媒体查询驱动的响应式网页设计提供了更多的选项。这个脚本很小——当以gzip方式提供给站点用户时只有1KB——而且不引人注目，所以几乎没有理由不使用它!
10.Modernizr
就像response .js一样，Modernizr为设计师带来了HTML5和CSS3的强大功能，即使是在较老的浏览器中。虽然它不像response .js那样轻量级，但它确实在较老的浏览器中提供了类似媒体查询的功能。Modernizr给我们带来的另一个令人兴奋的功能是，当它涉及到响应式网页设计时，它增加了一些对非常有趣的——但目前存在问题和混乱的——W3C规范的支持Flexbox模型这允许更容易和更健壮的网页布局。
Modernizr还提供条件加载功能。如果你担心加载太多资源，因为页面速度Modernizr允许您根据用户的浏览环境有条件地加载某些资源。
负责任的响应
不是每个响应式网页设计项目都需要这里提到的所有资源。和往常一样，将设计项目限制在实现预期目标所需的组件上。然后，在适当的时候，添加一些可以为尽可能多的用户增强用户体验的功能，而不影响其他用户的体验。
这些资源的选择是基于它们的能力，以帮助您更有效地完成响应式网页设计。适应性和响应式网页设计实践仍处于初级阶段，但它们很重要，因为浏览设备和观看方法的多样化网上的3D例如，随着我们的行业向未来发展，这种趋势将继续下去。如果你知道一个工具可以帮助建立响应式网页设计，请在评论中分享!
相关内容
- 10个在移动设备上测试网站的优秀工具
- 快速浏览手机网页设计
- 构建移动Web应用的正确方法:技巧和技术
