在今天,我们将探索Adobe的一种名为Edge Reflow的新工具。 我相信它有助于创建一个“看起来很简单”的响应式网站,这无疑是设计师和开发人员应该检查的内容。
在撰写本文时,Adobe Edge Reflow处于公开测试阶段,可以免费下载。 要下载,请登录Adobe Creative Cloud网站,然后您可以在“ 边缘工具和服务”部分下的“ 应用程序中心”页面中找到该应用程序。
设置网格和工作区
在工作区的左侧,您将找到几个控制网页属性的选项。 您可以设置列数,列装订线,内容的宽度,并指定这些长度的单位度量-px,百分比或em。
![](https://i-blog.csdnimg.cn/blog_migrate/fa0a0788a34740a0dee8379ac39fe606.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fa0a0788a34740a0dee8379ac39fe606.png)
在Edge Reflow中,您可以轻松设置“断点”。 断点是您的网站样式将发生转变的阈值。 要设置断点,请单击工作区右上方的加号按钮。 然后,向右或向左滑动页面处理程序,然后单击加号按钮以设置新的断点。
![](https://i-blog.csdnimg.cn/blog_migrate/b696be839b70a28890e6f499e8f94da6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/b696be839b70a28890e6f499e8f94da6.png)
您可以为元素指定不同的样式,以了解元素在每个断点处的外观或适应方式。
![](https://i-blog.csdnimg.cn/blog_migrate/bf6b65ea2b3f99a984047bbba749f13e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/bf6b65ea2b3f99a984047bbba749f13e.png)
添加元素和样式
只需单击即可在Edge Reflow中添加元素。 要创建一个新元素,请单击矩形图标,然后在工作区中拖动鼠标。 选择元素后,“ 边缘回流”将显示应用的属性,例如宽度和高度,边距和填充。
![](https://i-blog.csdnimg.cn/blog_migrate/dd123c22f2a91b0a4783833c820af9c1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/dd123c22f2a91b0a4783833c820af9c1.png)
您可以在样式标签中找到更多添加样式的选项。 在此选项卡中,您可以添加背景颜色(甚至带有渐变),边框(包括边框半径),并调整所选元素的不透明度。
![](https://i-blog.csdnimg.cn/blog_migrate/db4020304c06ba9d0b6614ca59796922.png)
![](https://i-blog.csdnimg.cn/blog_migrate/db4020304c06ba9d0b6614ca59796922.png)
您可以从DOM树检查器中检查元素的样式。 它位于工作区的底部。
您还可以通过按Command + F12 (在Mac上)或Ctrl + F12 (在Windows上)在浏览器中预览结果。
![](https://i-blog.csdnimg.cn/blog_migrate/c89eb02410885cfa72cf88abc03eaeae.png)
![](https://i-blog.csdnimg.cn/blog_migrate/c89eb02410885cfa72cf88abc03eaeae.png)
Adobe Edge服务集成
回流与其他Adobe Edge服务集成在一起。 使用文本时,您可以从Adobe Edge Webfont应用字体系列。
![](https://i-blog.csdnimg.cn/blog_migrate/eef02b20c66b25617f9817bed6ebdba1.png)
![](https://i-blog.csdnimg.cn/blog_migrate/eef02b20c66b25617f9817bed6ebdba1.png)
您还可以使用Adobe Edge Inspect在整个移动设备上无缝测试网站。
结论
由于这只是预览,因此其中不包含几个关键功能。 在当前版本中,我找不到如何将项目导出到HTML和样式表文档的功能,并且“ 首选项”菜单已禁用。
尽管如此,Adobe Edge Reflow作为利基市场中的工具看起来确实很有前途,特别是对于入门级用户而言,它可能非常有用。 借助Reflow,他们可以创建响应式网站,而无需处理屏幕背后的代码。