当前位置:首页 > 响应式网站建设

让构建响应式网站更简单

2019-12-22

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

当我在2012年制作我的第一个自适应网站时,我很快意识到恒定的浏览器窗口大小调整效率低下且费时。我刚从爱沙尼亚移居到澳大利亚,对于一个新生儿来说,时间是非常宝贵的资源。

我开始寻找更好的方法来查看媒体查询的效果。

我碰到了Matt Kersley的响应式Web设计测试工具,被吓了一跳。把我的开发时间缩短了一半即使该应用程序非常基础,但它很快变得必不可少,并且我继续使用了几年。

了解问题

在开发响应式网站时,问题在于必须不断调整浏览器窗口的大小。尽管这种不可避免的动作是大多数人的第二天性,但它也掩盖了我们不经常欣赏的设计方面-最显着的是不一致和时间管理。

由于设计通常出现在移动,平板电脑和桌面环境的某种组合中,因此介于两者之间的所有内容都处于不确定的状态。填补这些空白需要大量的时间和精力。

问题在于难以一次查看一个屏幕尺寸,而不是获得不同屏幕尺寸的多合一概览。当我们针对各种屏幕类型进行构建时,在任何给定时间仅查看设计的单个实例都没有意义-我们将无法获得元素样式如何在断点之间变化的上下文。 。

当前的做法只是不适应这些现代的发展方式。幸运的是,这还不是全部坏消息。

简单的解决方案

XRespond是一个虚拟设备实验室,用于设计,开发和测试响应式网站。这个想法很简单:它使您可以并排比较网站,就像前面的墙上有其他设备一样。

您不必离开办公桌,笔记本电脑甚至喜爱的浏览器。通过零设置,您可以立即开始比较网站。


如果您要构建模式库或样式指南,则XRespond可以提供帮助,因为您可以同时关注具有不同屏幕尺寸的单个组件。正如您对开发工具所期望的那样,它可以与本地服务器很好地协同工作。

只需记住,与任何仿真一样,XRespond不能与真实设备上的测试竞争,但是它可以在90%的时间内实现目标-并花费一小部分时间。

如何使用它?

输入网站地址,单击按钮,XRespond将自动在不同的虚拟设备上显示该网站-您可以根据需要选择和自定义该网站。

XRespond可与其他开发工具很好地配合使用,尤其是我最喜欢的工具之一:BrowsersyncBrowsersync使您能够在虚拟(和真实)设备上同时设置实时重新加载和同步滚动。这使发现问题变得更加简单,因为问题变得更加明显。

如果您的网站无法加载怎么办?

有时,您可能会遇到网站无法加载的问题。这很可能与您的网站有关,阻止其自身被加载到iframe中。如果您拥有网站,则可以根据设置临时禁用X-Frame-Options内容安全策略

结论

我爱XRespond,不仅是因为我喜欢制作它,还因为它简化了我的生活。我可以减少工作时间和精力,而将业余时间用于其他工作。它给了我提高工作质量的机会。希望您会发现XRespond同样有用,并且会开始享受它为您节省的时间。

免费获取报价

  • 29923329

  • 杭州市丰庆路498号北软智慧科创大厦203

  • 0571-85815193

  • pady@1t2.cn

网站地图 版权所有 © 2008-2021 杭州派迪科技有限公司  Copyright © 2008-2020  www.hzpady.com  All Rights Reserved    浙ICP备14029905号-1     公安备案:33010802008411    软著登字第3457658号