【原创】响应式网页设计基础【从零开始】

响应式网页设计基础【从零开始】

如今的互联网事业突飞猛进&＃xff0c;可谓一日千里。响应式网页设计凭借其能为开发者提高开发效率&＃xff0c;降低维护成本&＃xff0c;提升用户体验等突出优势更是为Web 2.0时代掀起了又一股狂潮&＃xff0c;致使无数开发者倾心致力于响应式网页设计。纷纷为响应式设计贡献自己的绵薄之力&＃xff0c;当然各大软件制造上肯定不会放过如此良机&＃xff0c;也纷纷推出各类响应式设计软件。理所当然不乏优秀之作&＃xff1a;

• Groundwork&＃xff0c;一款开源的响应式设计工具&＃xff0c;在Github上可以找到其项目源代码。Groundwork提供多套通用响应式页面模版&＃xff0c;用于快速构建Web响应式应用程序。此外&＃xff0c;它还提供丰富的UI组件&＃xff0c;详情可以访问Groundwork官网。
• FROONT,一个网页版的响应式开发工具。提供在线编辑&＃xff0c;布局调整&＃xff0c;以及在不同临界值之间切换预览等响应式开发必备功能&＃xff0c;还能导出html/css文件&＃xff0c;实属强大的响应式开发工具&＃xff0c;更具体的介绍请参看FROONT官网&＃xff0c;注册并登录即可体验在线响应式开发。
• Adobe Edge Reflow CC&＃xff0c;由世界著名软件大户Adobe公司开发的响应式网页设计软件。和Adobe Dreamweaver、Adobe Photoshop等知名软件一样&＃xff0c;Adobe Edge Reflow CC是一款桌面应用程序&＃xff0c;配合Adobe Edge Inspect CC可在各种移动设备之间进行响应式实时开发调试&＃xff0c;我认为这无疑是目前为止最好的响应式网页设计软件。

接下来将对如何使用Adobe Edge Reflow CC进行响应式网页设计&＃xff0c;以及使用Adobe Edge Inspect CC进行调试做详细介绍。

安装Reflow和Inspect

Adobe最新推出了Adobe Creative Cloud&＃xff0c;用于管理所有Adobe软件&＃xff0c;包括下载、更新等。界面如下&＃xff1a;

如果已经安装过Adobe Creative Cloud&＃xff0c;那么可以直接通过它下载并安装Reflow和Inspect。如果未安装过Adobe Creative Cloud&＃xff0c;可以直接通过https://creative.adobe.com/products/reflow?promoid&＃61;KFKMR下载Adobe Edge Reflow CC&＃xff0c;系统会自动提示下载安装Adobe Creative Cloud&＃xff0c;Adobe Edge Inspect CC安装方法雷同&＃xff0c;不做赘述。

Adobe Edge Reflow CC界面初识

Reflow 的用户界面如上图所示。从界面来看&＃xff0c;目前的Reflow功能还很有限&＃xff0c;比如&＃xff1a;工具箱目前只有四个选项。但是&＃xff0c;其强大之处不在于此&＃xff0c;在于响应式的支持。下面我们一一来介绍各个部分。

首先&＃xff0c;顶部灰色的一条菜单栏与其他软件没有太大差异&＃xff0c;使用过windows系统的用户应该都很熟悉&＃xff0c;不多废话。

接下来软件主体区域分为左右两个部分&＃xff0c;左侧最上面一行是工具箱&＃xff0c;如图所示包含四个工具&＃xff0c;分别是选择工具、添加盒子、添加文本和添加图片。

• 选择工具&＃xff0c;用于选择盒子&＃xff0c;拖动改变位置&＃xff0c;设置CSS样式等。
• 添加盒子&＃xff0c;用于在界面上创建一个布局盒子&＃xff0c;编译后会对应生成一个div标签。
• 添加文本&＃xff0c;用于在盒子中创建文本输入区&＃xff0c;编译后会对应生成一个p标签。
• 添加图片&＃xff0c;用于在盒子中创建图片元素&＃xff0c;编译后会对应生成一个img标签。

介绍完这些工具&＃xff0c;我发表一下自己对Reflow的个人看法。从目前Reflow提供的工具而言&＃xff0c;Reflow对html结构的展现支持并没有Dreamweaver等编辑器强大&＃xff0c;数完了也不过div、p、img三个标签&＃xff0c;对语义化html结构的支持可谓少之又少&＃xff0c;因此&＃xff0c;我认为Reflow完全是为响应式布局而生。而在使用Reflow完成响应式模块布局之后&＃xff0c;模块内部的内容区域样式和结构的实现&＃xff0c;还是需要借助于像Sublime Text或Dreamweaver等这类更专业的网页编程软件来实现。

右侧是软件最主要的区域&＃xff0c;各个相应临界值下的个性化布局完全在这片区域中实现。截图中标出了右侧上部的彩色条为临界值标识区&＃xff0c;这里的临界值并非固定不变的&＃xff0c;完全可以根据用户需求定制&＃xff0c;点击右侧的添加临界值的加号按钮&＃xff0c;可以创建一个可左右拖动的三角标&＃xff0c;通过左右拖动来确定临界值&＃xff0c;非常的方便。

右侧下方是网格区域&＃xff0c;用户可以在view-Grid菜单中设置网格属性。点击标尺上方各个临界值区域的彩色条纹&＃xff0c;可迅速将画布调整至目标尺寸&＃xff0c;然后针对不同尺寸&＃xff0c;调整画布网格中的盒子的布局效果&＃xff0c;当各个临界尺寸的布局都调整好之后&＃xff0c;我们保存项目&＃xff0c;点击F12或view-Preview in Chrome在Chrome浏览器中预览相应效果。

在添加临界值的加号按钮下方还有一个叫Edge Inspect CC的按钮&＃xff0c;主要用于结合Adobe Edge Inspect CC进行移动端的真机调试。Inspect启动前后效果图如下&＃xff1a;

Adobe Edge Inspect CC启动后&＃xff0c;点击该按钮&＃xff0c;会出现一个主机在浮层中&＃xff0c;移动设备通过Inspect移动端添加相应主机后&＃xff0c;当前设计中的页面便会出现在移动设备的屏幕上&＃xff0c;当布局修改后&＃xff0c;点击浮层右下角的刷新按钮&＃xff0c;可以远程控制刷新移动端的页面&＃xff0c;以查看最新的显示效果&＃xff0c;非常方便。还可以点击右下角的全屏按钮&＃xff0c;改变移动端的显示效果。

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

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

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

接下来是分辨率宽为320的&＃xff1a;

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

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

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

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

点击右上角的“&＃43;”按钮&＃xff0c;添加与Inspect CC中对应的主机IP&＃xff1a;

输入主机地址后&＃xff0c;点击加入将得到passcode&＃xff0c;接下来如下操作&＃xff1a;

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

以上是针对HTC的操作&＃xff0c;针对iPad的操作大同小异&＃xff0c;在此不再重复&＃xff0c;下面看下iPad上的显示效果&＃xff1a;

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

PC端多浏览器兼容性问题

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

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

补充说明

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

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

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


var is_chrome &＃61; navigator.userAgent.toLowerCase().indexOf(&＃39;chrome&＃39;) > -1;
if (!is_chrome) {document.write("

Preview HTML generated by Reflow is meant to be viewed in Google Chrome and may not display correctly in other browsers.

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

总结

本文讲到的都是一些有关响应式网页设计的非常基础的东西&＃xff0c;实际项目开发会难得多&＃xff0c;与具体业务相关联&＃xff0c;也没办法讲得很清楚&＃xff0c;需要大家在实际操作的时候慢慢体会总结。