Adobe Edge Reflow CC 响应式网页设计

一个案例教会你响应式网页设计

第一步，打开Adobe Edge Reflow CC，新建一个名为responsive的项目。使用Add a Box工具，在画布上绘制四个盒子，然后使用Selection Tool分别选中每个盒子，在styling面板中添加不同的背景色来便于区分，然后分别为每个盒子添加文字标注。点击画布右上角的加号按钮，添加几个常用临界值（如：240，320，480，640等），当然，你也可以先定临界值，然后添加盒子。最终效果大致如图：

由图可知，当前布局是针对屏幕分辨率宽为480的设备设计的，下面我们分别调整其他几个尺寸的布局，先看分辨率宽为240的：

接下来是分辨率宽为320的：

再看针对iPhone 4s等具有高清retina屏幕的分辨率宽为640的：

到目前为止，实际上已经可以测试看效果了，但是为了兼容PC浏览器，我们再添加一个大分辨率的布局效果：

好了，现在我们使用Chrome看看在各种分辨率上的显示效果，别忘了先保存，然后F12：

在Chrome中的显示效果我就不一一截图了，结果应该和上面的布局效果一致的，下面展示下在真机上的显示情况，设备有限，仅提供HTC EVO 3D（分辨率540×960）和iPad mini（分辨率760×1024）的效果。首先，启动Adobe Edge Inspect CC，然后点击Reflow右上角的Edge Inspect CC按钮打开主机列表，然后打开移动设备端的Inspect CC软件，HTC端如图：

点击右上角的“+”按钮，添加与Inspect CC中对应的主机IP：

输入主机地址后，点击加入将得到passcode，接下来如下操作：

在Reflow中的Inspect中输入passcode后点击对应设备右侧的“勾”按钮，就可以在移动设备上看到显示效果了：

以上是针对HTC的操作，针对iPad的操作大同小异，在此不再重复，下面看下iPad上的显示效果：

好了，到此我们基于Adobe Edge Reflow CC的响应式案例制作就告一段落。

PC端多浏览器兼容性问题

我们知道，在PC上有多种浏览器产商，而他们各自对标准的支持都各有特色，并不统一。对于以上案例，只能保证在对标准支持良好的浏览器中（比如Chrome、Firefox、IE8+等）才能很好的响应，而在IE8及以下浏览器中并不能得到完美的响应，只能已固定布局进行百分比缩放，这样就会出现以下尴尬的情况：

那怎么办呢？放弃低版本IE？嗯~~不太现实。不过我们的前端开发工程师是潜能无限的，所谓兵来将挡水来土掩，山人自有妙计。具体如何处理，本文不做讲解，详情请参看《media query ie8- 兼容实现总结》，此文中作者对IE8及其以下版本浏览器的响应式实现做了详细的阐释。

补充说明

Adobe Edge Reflow CC使用非常方便，开发非常迅速。但是真正用于项目开发的时候还需要有一些细节的注意。项目编译后会生成一个目录结构如图：

• *.rflw 是一个json格式的文本文件，存放的是项目相关数据，包括画布中盒子结构，类型，位置等等一系列信息。
• assets 文件夹中存放的是生成的静态文件css,html,images等。
• boilerplate.css 是一个响应式模版样式文件，存放一些公共样式。
• reflow.css 就是和我们自定义结构息息相关的样式信息了。
• xxx_preview.html 这个是我们最终会使用到的预览页面，是最终生成的html结构。

这里需要特别注意，Adobe Edge Reflow CC的响应式是基于Chrome的，在html文件中我们会发现下面一段代码：

这会导致在非Chrome浏览器中多出一段说明信息，在正式开发中我们在使用之前应该先将这些多余的结构清理掉。