响应式网页设计基础【从零开始】
如今的互联网事业突飞猛进，可谓一日千里。响应式网页设计凭借其能为开发者提高开发效率，降低维护成本，提升用户体验等突出优势更是为Web 2.0时代掀起了又一股狂潮，致使无数开发者倾心致力于响应式网页设计。纷纷为响应式设计贡献自己的绵薄之力，当然各大软件制造上肯定不会放过如此良机，也纷纷推出各类响应式设计软件。理所当然不乏优秀之作：
- Groundwork，一款开源的响应式设计工具，在Github上可以找到其项目源代码。Groundwork提供多套通用响应式页面模版，用于快速构建Web响应式应用程序。此外，它还提供丰富的UI组件，详情可以访问Groundwork官网。
- FROONT,一个网页版的响应式开发工具。提供在线编辑，布局调整，以及在不同临界值之间切换预览等响应式开发必备功能，还能导出html/css文件，实属强大的响应式开发工具，更具体的介绍请参看FROONT官网，注册并登录即可体验在线响应式开发。
- Adobe Edge Reflow CC，由世界著名软件大户Adobe公司开发的响应式网页设计软件。和Adobe Dreamweaver、Adobe Photoshop等知名软件一样，Adobe Edge Reflow CC是一款桌面应用程序，配合Adobe Edge Inspect CC可在各种移动设备之间进行响应式实时开发调试，我认为这无疑是目前为止最好的响应式网页设计软件。
接下来将对如何使用Adobe Edge Reflow CC进行响应式网页设计，以及使用Adobe Edge Inspect CC进行调试做详细介绍。
安装Reflow和Inspect
Adobe最新推出了Adobe Creative Cloud，用于管理所有Adobe软件，包括下载、更新等。界面如下：
如果已经安装过Adobe Creative Cloud，那么可以直接通过它下载并安装Reflow和Inspect。如果未安装过Adobe Creative Cloud，可以直接通过https://creative.adobe.com/products/reflow?promoid=KFKMR下载Adobe Edge Reflow CC，系统会自动提示下载安装Adobe Creative Cloud，Adobe Edge Inspect CC安装方法雷同，不做赘述。
Adobe Edge Reflow CC界面初识
Reflow 的用户界面如上图所示。从界面来看，目前的Reflow功能还很有限，比如：工具箱目前只有四个选项。但是，其强大之处不在于此，在于响应式的支持。下面我们一一来介绍各个部分。
首先，顶部灰色的一条菜单栏与其他软件没有太大差异，使用过windows系统的用户应该都很熟悉，不多废话。
接下来软件主体区域分为左右两个部分，左侧最上面一行是工具箱，如图所示包含四个工具，分别是选择工具、添加盒子、添加文本和添加图片。
- 选择工具，用于选择盒子，拖动改变位置，设置CSS样式等。
- 添加盒子，用于在界面上创建一个布局盒子，编译后会对应生成一个
div标签。 - 添加文本，用于在盒子中创建文本输入区，编译后会对应生成一个
p标签。 - 添加图片，用于在盒子中创建图片元素，编译后会对应生成一个
img标签。
介绍完这些工具，我发表一下自己对Reflow的个人看法。从目前Reflow提供的工具而言，Reflow对html结构的展现支持并没有Dreamweaver等编辑器强大，数完了也不过div、p、img三个标签，对语义化html结构的支持可谓少之又少，因此，我认为Reflow完全是为响应式布局而生。而在使用Reflow完成响应式模块布局之后，模块内部的内容区域样式和结构的实现，还是需要借助于像Sublime Text或Dreamweaver等这类更专业的网页编程软件来实现。
右侧是软件最主要的区域，各个相应临界值下的个性化布局完全在这片区域中实现。截图中标出了右侧上部的彩色条为临界值标识区，这里的临界值并非固定不变的，完全可以根据用户需求定制，点击右侧的添加临界值的加号按钮，可以创建一个可左右拖动的三角标，通过左右拖动来确定临界值，非常的方便。
右侧下方是网格区域，用户可以在view–Grid菜单中设置网格属性。点击标尺上方各个临界值区域的彩色条纹，可迅速将画布调整至目标尺寸，然后针对不同尺寸，调整画布网格中的盒子的布局效果，当各个临界尺寸的布局都调整好之后，我们保存项目，点击F12或view–Preview in Chrome在Chrome浏览器中预览相应效果。
在添加临界值的加号按钮下方还有一个叫Edge Inspect CC的按钮，主要用于结合Adobe Edge Inspect CC进行移动端的真机调试。Inspect启动前后效果图如下：
Adobe Edge Inspect CC启动后，点击该按钮，会出现一个主机在浮层中，移动设备通过Inspect移动端添加相应主机后，当前设计中的页面便会出现在移动设备的屏幕上，当布局修改后，点击浮层右下角的刷新按钮，可以远程控制刷新移动端的页面，以查看最新的显示效果，非常方便。还可以点击右下角的全屏按钮，改变移动端的显示效果。
Leave a Comment