文档章节

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

Mr.Zheng
 Mr.Zheng
发布于 2013/07/05 13:55
字数 2819
阅读 5622
收藏 244

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

如今的互联网事业突飞猛进,可谓一日千里。响应式网页设计凭借其能为开发者提高开发效率,降低维护成本,提升用户体验等突出优势更是为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软件,包括下载、更新等。界面如下:

Creative Cloud

如果已经安装过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界面初识

Adobe Edge Reflow CC

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

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

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

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

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

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

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

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

Adobe Edge Inspect CC

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

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

第一步,打开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(分辨率540x960)和iPad mini(分辨率760x1024)的效果。首先,启动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文件中我们会发现下面一段代码:

<!-- lang: js -->
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (!is_chrome) {
    document.write("<p id='disclaimerTag'>Preview HTML generated by Reflow is meant to be viewed in Google Chrome and may not display correctly in other browsers.</p>");
}

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

总结

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

© 著作权归作者所有

共有 人打赏支持
Mr.Zheng
粉丝 53
博文 22
码字总数 38792
作品 0
杭州
网页/平面设计
私信 提问
加载中

评论(6)

CHENSNOW
CHENSNOW
有q或者微信号么?有些问题想请教一下
我q号是1211265772
狼之羿
狼之羿
没有用过……
高跟男爵
高跟男爵
工具我知道的有几个 用了用 感觉当做一个比较灵活的东西的时候 总是信心不足·· 目前感觉只是自己YY 或者与同事、合伙人得瑟的小玩意···
Mr.Zheng
Mr.Zheng

引用来自“缪斯的情人”的评论

做简单的可以,这东西生成的代码不够简洁,一般实际设计中都是采用@media方式,这玩意也就

是的,工具开发确实存在这样的问题,没有纯手工写代码简洁。但是工具开发对于上手比较快,对快速开发比较有利。而且毕竟是新工具,本身就不成熟,也许未来有一天会更完美!
ccor
ccor
为什么一个json文件要叫*.rflw这样怪异的名字,*.json多好,各种蛋疼……
缪斯的情人
缪斯的情人
做简单的可以,这东西生成的代码不够简洁,一般实际设计中都是采用@media方式,这玩意也就
【原创】响应式设计之移动端调试工具

背景 2013年是网页设计响应式的一年。所谓响应式网页设计,是由Ethan Marcotte在2010年提出的名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同...

Mr.Zheng
2013/07/02
0
0
14个HTML/CSS设计和开发框架

专业的网页设计是既复杂又耗时的。它需要HTML和CSS框架的完美结合。这些框架不仅可以为设计方案增加特定的功能,还可以大大地节省时间和精力。 高效的框架不仅是网站设计的基础,它提供的各种...

IanSun
2015/03/14
0
0
Boostrap 基础、用户界面架构、响应式网页设计等课程分享

Boostrap 基础、用户界面架构、响应式网页设计等课程分享给大家,需要的可以回复留一下邮箱。

一课上手
2017/03/24
2.5K
123
响应式不是万能的!教你提升响应式设计的移动性能

你调整了浏览器,笑容攀上脸颊。你感到非常开心,认为自己实现了友好移动的目标。在正式讨论前,让我来预测下未来:你会失掉用户和经济效益,如果你把响应式网页作为唯一目标和唯一的解决办法...

罗马教堂的钟声
2015/11/24
56
0
十大前端开发框架(上)

本文由伯乐在线 -厉瑶 翻译。未经许可,禁止转载! 英文出处:site point。欢迎加入翻译组。 编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部...

伯乐在线
2013/07/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

redis&memcached&SQL&NoSQL

Why 一个应用肯定有两部分逻辑:数据逻辑和业务逻辑。 数据逻辑包括各种I/O,和内部的数据的处理,也就是在内部如何组织数据结构,变量也属于这一部分。 当一个应用变成一个进程,它负责数据逻...

backbye
今天
2
0
什么时候使用字节流、什么时候使用字符流,二者的区别

在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成。 InputStream 和OutputStream,...

watermelon11
今天
6
0
Alpakka Kafka,反应式Kafka客户端

Alpakka Kafka 是一个要用于 Java 和 Scala 语言的开源的流感知和反应式集成数据线项目。它建立在 Akka Stream之上,提供了 DSL 来支持反应式和流式编程,内置回压功能。Akka Streams 是 Re...

羊八井
今天
5
0
PHP7源码编译安装详解

$ yum groupinstall "development tools"$ yum install -y gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype \freetype-devel libpng libpng-devel libxml2 ......

问题终结者
今天
5
0
Django学习笔记-从创建虚拟环境到启用服务

1 前置条件 windows系统下,目前已经完成anaconda3或miniconda3的安装,这也意味着已经完成了python3的安装。 2 创建虚拟环境 1、通过Anaconda Prompt,使用conda命令创建虚拟环境(base) e...

davidwbnu
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部