响应式网站制作利用XRespond测试工具：让我们建立响应性网站更简单

响应式网站制作是什么原理，如何更加快速的制作响应式网站？

人们消费信息的方式不断发展。作为网页设计师和开发人员，我们跟上所有不同的屏幕形状和尺寸，学习创建美丽，灵活的软件。然而，大多数可用的工具仍然不能反映我们构建的平台的性质和多样性：浏览器。

当我在2012年做第一个响应敏捷的网站时，我很快意识到，不断的浏览器窗口调整大小是多么低效和耗时。我刚刚从爱沙尼亚搬到了澳大利亚，随着新生儿的到来，时间非常宝贵。

我开始寻找更好的方式来查看我的媒体查询的影响。

我遇到了Matt Kersley的响应式网页设计测试工具，并被吹走了。它将我的开发时间缩短了一半。即使应用程序是相当基本的，但它很快成为不可或缺的，我继续使用它几年。

这是非常出乎我的意料，我从来没有看到这个辉煌的概念所采取的任何进一步。这一点，加上缺乏特色，让我在旅途中创建的开源虚拟设备实验室XRespond。

问题了解链接

当谈到开发网站的响应，问题的关键在于不必不断地调调浏览器窗口。尽管这不可避免的动作手感第二大自然最，它也设计的口罩方面我们不经常欣赏 – 最明显的是，不一致和时间管理。

随着设计通常在手机，平板电脑和台式机方面的某种组合出现，任何之间被留在有些不确定状态。而填补这些缺口需要大量的时间和精力。

问题在于在时间点看一个屏幕大小的困难，而不是让不同屏幕尺寸的所有功能于一身的概述。当我们正在构建的各种屏幕类型，它没有任何意义，在任何给定的时间，仅查看设计的单个实例 – 我们就无法获得的风格元素如何在断点更改上下文。

目前的做法就是不迎合发展的这些现代的方式。幸运的是，不是所有的坏消息。

的简单解决方案链接

XRespond是设计，开发和测试网站的响应虚拟设备的实验室。这个想法很简单：它可以让您通过边做网站比较的一面，如果你有在你面前的墙不同的设备。

您不必离开办公桌，笔记本电脑，甚至喜欢的浏览器。并与零设置，你就可以开始比较网站的时候了。

XRespond可以帮助，如果你正在构建一个模式库或风格指南，因为你可以在不同的屏幕尺寸同时注重单个组件上。正如你从一个开发工具期望的，它与本地服务器运行良好。

只要记住的是，与任何仿真，XRespond不能与在真实设备上测试的竞争，但是它可以把你90％的方式出现 – 在时间的一小部分。

如何使用它？链接

输入网站地址，点击该按钮，XRespond会自动显示在不同的虚拟设备的网站 – 你可以选择和自定义您认为合适的。

XRespond与其他开发工具的效果很好，我最喜欢的一个显着：Browsersync。。Browsersync使您可以设置现场重载并同步滚动-在虚拟（和实际）设备的都同时这使得简单的斑点问题，因为问题变得更加明显。

怎么做，如果您的网站将不会加载？链接

有时，你可能会遇到你的网站无法加载的问题。这很可能与你的网站本身防止从一个iframe中装载的事情。如果你自己的网站，可以你暂时禁用X-Frame-Options或内容安全策略，根据您的设置。

结论链接

我爱XRespond – 并不只是因为我喜欢做，而是因为它简化了我的生活。我可以花更少的时间和精力的工作，并利用业余时间为别的东西。它给了我提高工作质量的机会。我希望你会发现XRespond同样有用，并开始享受这样可以节省您的时间。