当我在2012年制作我的第一个自适应网站时,我很快意识到恒定的浏览器窗口大小调整效率低下且费时。我刚从爱沙尼亚移居到澳大利亚,对于一个新生儿来说,时间是非常宝贵的资源。
我开始寻找更好的方法来查看媒体查询的效果。
我碰到了Matt Kersley的响应式Web设计测试工具,被吓了一跳。它把我的开发时间缩短了一半。即使该应用程序非常基础,但它很快变得必不可少,并且我继续使用了几年。
了解问题
在开发响应式网站时,问题在于必须不断调整浏览器窗口的大小。尽管这种不可避免的动作是大多数人的第二天性,但它也掩盖了我们不经常欣赏的设计方面-最显着的是不一致和时间管理。
由于设计通常出现在移动,平板电脑和桌面环境的某种组合中,因此介于两者之间的所有内容都处于不确定的状态。填补这些空白需要大量的时间和精力。
问题在于难以一次查看一个屏幕尺寸,而不是获得不同屏幕尺寸的多合一概览。当我们针对各种屏幕类型进行构建时,在任何给定时间仅查看设计的单个实例都没有意义-我们将无法获得元素样式如何在断点之间变化的上下文。 。
当前的做法只是不适应这些现代的发展方式。幸运的是,这还不是全部坏消息。
简单的解决方案
XRespond是一个虚拟设备实验室,用于设计,开发和测试响应式网站。这个想法很简单:它使您可以并排比较网站,就像前面的墙上有其他设备一样。
您不必离开办公桌,笔记本电脑甚至喜爱的浏览器。通过零设置,您可以立即开始比较网站。
如果您要构建模式库或样式指南,则XRespond可以提供帮助,因为您可以同时关注具有不同屏幕尺寸的单个组件。正如您对开发工具所期望的那样,它可以与本地服务器很好地协同工作。
只需记住,与任何仿真一样,XRespond不能与真实设备上的测试竞争,但是它可以在90%的时间内实现目标-并花费一小部分时间。
如何使用它?
输入网站地址,单击按钮,XRespond将自动在不同的虚拟设备上显示该网站-您可以根据需要选择和自定义该网站。
XRespond可与其他开发工具很好地配合使用,尤其是我最喜欢的工具之一:Browsersync。Browsersync使您能够在虚拟(和真实)设备上同时设置实时重新加载和同步滚动。这使发现问题变得更加简单,因为问题变得更加明显。
如果您的网站无法加载怎么办?
有时,您可能会遇到网站无法加载的问题。这很可能与您的网站有关,阻止其自身被加载到iframe中。如果您拥有网站,则可以根据设置临时禁用X-Frame-Options
或内容安全策略。
结论
我爱XRespond,不仅是因为我喜欢制作它,还因为它简化了我的生活。我可以减少工作时间和精力,而将业余时间用于其他工作。它给了我提高工作质量的机会。希望您会发现XRespond同样有用,并且会开始享受它为您节省的时间。