响应式网站制作是什么原理,如何更加快速的制作响应式网站?
人们消费信息的方式不断发展。作为网页设计师和开发人员,我们跟上所有不同的屏幕形状和尺寸,学习创建美丽,灵活的软件。然而,大多数可用的工具仍然不能反映我们构建的平台的性质和多样性:浏览器。
当我在2012年做第一个响应敏捷的网站时,我很快意识到,不断的浏览器窗口调整大小是多么低效和耗时。我刚刚从爱沙尼亚搬到了澳大利亚,随着新生儿的到来,时间非常宝贵。
我开始寻找更好的方式来查看我的媒体查询的影响。
我遇到了Matt Kersley的响应式网页设计测试工具,并被吹走了。它将我的开发时间缩短了一半。即使应用程序是相当基本的,但它很快成为不可或缺的,我继续使用它几年。
这是非常出乎我的意料,我从来没有看到这个辉煌的概念所采取的任何进一步。这一点,加上缺乏特色,让我在旅途中创建的开源虚拟设备实验室XRespond。
问题了解链接
当谈到开发网站的响应,问题的关键在于不必不断地调调浏览器窗口。尽管这不可避免的动作手感第二大自然最,它也设计的口罩方面我们不经常欣赏 – 最明显的是,不一致和时间管理。
随着设计通常在手机,平板电脑和台式机方面的某种组合出现,任何之间被留在有些不确定状态。而填补这些缺口需要大量的时间和精力。
问题在于在时间点看一个屏幕大小的困难,而不是让不同屏幕尺寸的所有功能于一身的概述。当我们正在构建的各种屏幕类型,它没有任何意义,在任何给定的时间,仅查看设计的单个实例 – 我们就无法获得的风格元素如何在断点更改上下文。
目前的做法就是不迎合发展的这些现代的方式。幸运的是,不是所有的坏消息。
的简单解决方案链接
XRespond是设计,开发和测试网站的响应虚拟设备的实验室。这个想法很简单:它可以让您通过边做网站比较的一面,如果你有在你面前的墙不同的设备。
您不必离开办公桌,笔记本电脑,甚至喜欢的浏览器。并与零设置,你就可以开始比较网站的时候了。
XRespond可以帮助,如果你正在构建一个模式库或风格指南,因为你可以在不同的屏幕尺寸同时注重单个组件上。正如你从一个开发工具期望的,它与本地服务器运行良好。
只要记住的是,与任何仿真,XRespond不能与在真实设备上测试的竞争,但是它可以把你90%的方式出现 – 在时间的一小部分。
如何使用它?链接
输入网站地址,点击该按钮,XRespond会自动显示在不同的虚拟设备的网站 – 你可以选择和自定义您认为合适的。
XRespond与其他开发工具的效果很好,我最喜欢的一个显着:Browsersync。。Browsersync使您可以设置现场重载并同步滚动-在虚拟(和实际)设备的都同时这使得简单的斑点问题,因为问题变得更加明显。
怎么做,如果您的网站将不会加载?链接
有时,你可能会遇到你的网站无法加载的问题。这很可能与你的网站本身防止从一个iframe中装载的事情。如果你自己的网站,可以你暂时禁用X-Frame-Options
或内容安全策略,根据您的设置。
结论链接
我爱XRespond – 并不只是因为我喜欢做,而是因为它简化了我的生活。我可以花更少的时间和精力的工作,并利用业余时间为别的东西。它给了我提高工作质量的机会。我希望你会发现XRespond同样有用,并开始享受这样可以节省您的时间。