10个优秀的响应式网页设计工具

所以，你决定冒险去创造响应网页设计．太棒了!随着浏览景观多样化到移动设备，上网本，台式机等，响应式网页设计允许网页设计师为特定的设备提供不同的布局(基于屏幕大小和浏览器功能)，给网站访问者一个最佳的用户体验。

如何选择一个响应式网页设计工具

所以现在，你已经决定创建响应式网页设计是有益的。什么工具可以帮助你完成工作?

工具已经开始春天，为我们提供捷径和助手的共同点响应网页设计任务。让我们看一下即将有几个我找到最有用的东西。

我将列表中的工具分为四类:

• 负责排版
• 灵活的图像
• 响应式网页布局
• 测试和跨浏览器支持

负责排版

首先，让我们看看两种工具(从众多工具中脱颖而出)，它们允许我们创建漂亮的、自适应的排版。

1.Lettering.js

刻字.js，ajQuery用于控制您的Web类型的外观的插件是一个很好的帮助设计人员在他们的挫折排版．无论您是使用响应的网络设计，是否使用这种对网络类型的控制可以帮助您制作真正的创意外观，而无需诉诸基于图像的解决方案。

在响应式设计的背景下，letter. js让设计师精确控制排版特征，如间距，引线和字距，以便在各种视觉空间中产生最佳的阅读体验。

2.FitText

另一个jQuery插件，FitText帮助您使您的标题响应。FitText确保你的文本在各种设备上以最佳方式显示。这个插件可能很简单，但是它的灵活性把创造力留给了你，而且很容易实现。

灵活的图像

设置类型后，我们可以继续处理在响应式网页设计中放置图像的问题。有一个工具应该是每个响应网设计师的阿森纳的一部分。

3.imgSizer.js

在直接阅读imgsier .js的代码之前，请确保通读一遍伊桑马克特的崩溃这个脚本在响应式网页设计中扮演什么角色。从本质上说，这个脚本的目的是确保您的图像在Microsoft Windows中呈现干净。Marcotte的脚本在清理浏览器自动缩小的图像方面做得很好。

响应式网页布局

在每个响应式网页设计的核心是一个流动和灵活的布局，适应自己的屏幕大小和用户浏览器的功能。让我们转向与布局相关的资源，在响应式网页设计中，大多数操作都发生在这些资源上。

4.流体960电网系统

如果你一直在使用无处不在的960电网系统通过内森史密斯(我们中的许多人可能在某些时候将其用于项目或实验中)，查看这种对原始项目的流动调整。如果你对原版960满意的话。gs，那么你已经知道如何使用960流体网格系统。

5.Gridless

如果网页布局的网格系统对您似乎过于严格，请查看无缝的。无缝内置，以比其他网格系统更精简，并考虑到响应设计。无缝的代码基于讨论的哲学基于哲学手机第一制作网站的方法，必须交付到多种设备环境。

对于那些寻求更简洁、更注重内容的响应式网页设计方法的设计师来说，你可能会发现自己非常熟悉Gridless。

6。PXtoEM

与将固定宽度的设计工作转换为流体布局相关的一个繁琐的数学过程是转换绝对测量单位(即。px和pt)转换成相对的测量单位，例如ems.和百分比(％)用于排版、间距、容器宽度等。

PXtoEM是一个工具，它为用户提供了一个简单的转换工具，以帮助他们处理所有的数学问题。该网站还允许设计师快速、轻松地更改布局的基本字体大小，使其更易于管理。

例如，在您的HTML文档中，设置您的身体元素的字体大小到62.5%给了你更方便的转换比率1em是10px，使单位转换更容易做。

测试和跨浏览器支持

最后，正如我们创建响应的网页设计，我们将来到我们的Web类型清洁和自适应的地步，我们的图像是灵活的，我们的布局是流体。

现在我们需要确保我们的网站能在尽可能多的浏览环境中运行。

7。Adobe设备中心

在不同的设备上测试您网站的最佳方法是实际测试它本身的测试;没有什么能比得上看到您的网站在特定的移动小工具或计算机内的实际外观和行为。

然而，对于我们这些没有预算购买数百个新设备的人来说，解决方案是以Adobe Device Central的形式出现的。Device Central是我在不同设备上测试站点时使用过的较好的软件之一。

如果它是您寻求的种类和范围，设备中央不会让您失望。通过积极种植的设备库可供选择，用户将在市场上找到几个主要设备，随时可以加载和测试。

测试网站也变得很简单:只需输入网页的URI(本地或远程)，然后你就可以在你想要测试它的设备之间自由切换。

8。Web开发人员

虽然设备中央（上图）比购买一堆设备便宜，但它仍然可能在某些设计师的口袋簿的价格范围之外。

Web Developer浏览器扩展是一个很好的替代(或者是Device Central旁边的附加工具)。可用于Firefox和Chrome，这个扩展为设计师提供了几个工具，在开发响应或流动网站时方便。

最值得注意的是内置的功能，点击一个按钮就可以调整浏览器窗口的大小。新的尺寸预设可以立即保存和使用。

其他有用的功能包括按媒体类型查看CSS和列出包含的元素，我发现这对快速识别设计中的断点(或潜在断点)很有用。

9.Respond.js

使用媒体查询的一个明显缺点是，它们是CSS3规范的一部分，因此在老式浏览器(如IE8及以下)中是不存在的功能。

当然，人们可能会争辩说，我们没有看到运行IE6的大量移动设备。但有一点是值得注意的是，响应的网页设计不仅仅是关于移动设备的方式，它是开发为所有类型浏览情况进行优化的网站的一种方式。例如，IE7或IE8用户可能仍然受益于在大型宽屏监视器上呈现不同布局的网站与小屏幕上网本。

幸运的是，我们有response .js，一个轻量级的开源脚本，它为我们在IE6、ie7和ie8中执行媒体查询驱动的响应式网页设计提供了更多的选择。

这个脚本很小——gzip提供给站点用户时只有1KB——而且不显眼，所以没有什么理由不使用它!

10.Modernizr

就像Requess.js一样，即使在旧浏览器中，Modernizr也是在这里带来设计师HTML5和CSS3的力量。虽然它与Requess.js不如轻量级，但它确实为旧浏览器提供了类似媒体查询的能力。

Modernizr带给我们的另一个令人兴奋的功能，与响应式网页设计有关，是对W3C规范的一些额外支持Flexbox模型这使得网页布局更简单、更健壮。

Modernizr还提供有条件的装载功能。如果您关注加载许多资源，因为页速Modernizr允许您根据用户的浏览环境有条件地加载某些资源。

负责任的响应

并非每个响应的网络设计项目都需要此处提到的所有资源。一如既往地，只将您的设计项目限制为只需要实现所需目标所需的组件。然后，在适当的情况下，洒在能够为尽可能多的用户增强用户体验的特征，而不会为其他人倾斜。

这些资源的选择基于他们的能力，以帮助您完成您的响应式网页设计更有效。

自适应和响应式网页设计实践仍处于起步阶段，但它们很重要，因为浏览设备和浏览方法的多样化网上3D例如，随着我们行业的发展，这种趋势将会持续下去。

如果您知道一个可以帮助建立响应式网页设计的工具，请在评论中分享它们！

相关内容

• 10个在移动设备上测试网站的优秀工具
• 快速浏览移动网页设计
• 构建手机网页应用的正确方法:技巧和技巧