前端响应式开发-前端响应式布局框架

响应式网页开发模式分析摘要： 随着移动互联网和移动通信设备的发展，响应式网页设计这个出现较早但未被人注意的设计理念，在近两年逐渐发展起来。 可以预见，响应式开发技术将成为未来Web前端开发的必然趋势。 本文对这项技术做了一个简单的概述，介绍了响应式开发的开发过程和设计方法，并对一些具体的实现做了简单的说明。 关键词：响应式网页；  CSS;  Flow Layout响应式Web开发模式分析U].软件，2015，36（6）：92-96 AReviewofResponsiveWebDevelopmentPatternsSUKui，DONGMo，ZHANGYan-chao [Abstract]：WiththedevelopmentofmobileInternetandmobilecommunicationdevices，responsiveWebdesignthathasbeenpresentedbutunnoticedbywebdesignergraduallydevelopedinthesetwoyears.Itcanbepredictedthatre-sponsivewebdesignwillbecometheinevitabletrendinfuture.Thispapermakesasimpleoverviewonthistechnology，introducesthedevelopmentflowanddesignmethodofresponsiveweb，andstatessomeconcreterealization [Keywords] ：Responsiveweb ;CSS;Fluidlayout 0 简介 在技术快速更新的大趋势下，人们常用的电脑和互联网设备不再局限于台式电脑、显示器和网线。

各种尺寸和类型的笔记本电脑、平板设备、智能手机、智能手表、智能电视等具有CPU和存储功能的微型计算机设备正在迅速涌现。 随着3G、4G网络的不断普及，国内PC端网站日均覆盖人数基本维持在2.3亿人左右，并趋于停滞。 移动App日均覆盖量接近2亿，呈持续上升趋势。 大量数据调查表明，移动互联网行业时代已经到来，越来越多的人开始习惯使用移动设备代替笔记本电脑和台式机来完成日常工作。 工作和生活需要[1]，用户的注意力从PC转移到移动端的趋势不可逆转，人们在这些大小不一的智能设备上浏览网页的用户体验要求也必然会提高。 传统的Web前端开发是为一台设备提供的，比如台式电脑。 每个网页通常为每个元素的宽度设计一个固定大小。 这样设计的网页在不同尺寸的屏幕上会有不同的显示效果。 当用户使用桌面PC和移动互联网设备访问网站时，有很大的不同，他会感到不舒服[2]。 为了解决这些问题，针对不同的设备制作不同的网页是目前国内很多网站的做法。 比如可以专门为移动设备提供移动版本，保证网页在不同设备上的显示效果，但是增加了维护成本。 同时，也大大增加了架构设计的复杂度[3]。 随着现在不同尺寸的设备越来越多，我们不可能为每个设备开发一个单独的网络界面。

1 响应式页面 为了应对介绍中存在的问题，2010年，Ethan Marcotte提出了“响应式网页设计（Responsive Web Design）”的概念[4]。 这篇文章借鉴了响应式建筑设计的思想：一门新学科出现了——“响应式建筑（responsive-architecture）”，物理空间应该能够根据存在于其中的人的状况做出响应。 同样，页面的设计和开发也要根据用户行为和设备环境（系统平台、屏幕尺寸、屏幕方向等）做出相应的响应和调整。 虽然Responsive Web是在2010年提出的，但是随着HTML5和CSS3的出现，这项技术真正开始被国内开发者关注是近两年的事情。  2 响应式Web开发流程 目前最常用的Web开发模式是基于瀑布模式或瀑布模式的修改。 这类模型通常可以简化为五个步骤：方案分析、总体架构设计、具体开发、精准测试、完善修改。  2.1 方案分析与总体设计传统开发流程中的框架图主要由布局和组件组成。 它们通常被设置为一个特定的大小（通常基于像素，比如 wrapper 通常是 960px 显示宽度），几乎没有调整的余地。 这些框架为网格布局提供了特定的尺寸，通常在特定的屏幕分辨率下观看效果最佳，但在更大或更小的分辨率下，网站可能会水平滚动条，或在页面两侧产生空白 [5] .

不同的屏幕会导致布局发生变化，最终可能导致导航栏菜单无法使用，无法进入表单，界面变得凌乱。 在响应式网页开发中，视图不同设计的组件也不同，页面起不到包容的作用。 框架图要在各种尺寸的屏幕上显示，所以布局尺寸也多种多样。 布局应该能够适应各种分辨率尺寸，考虑三列、两列，甚至是小型显示设备上的单列显示。 响应式网页设计不应该使用像素完美的设计，而是设计不同大小的布局和组件以适应不同的需求。 滚动条、文本内容、表单和其他元素构成了整个页面的基础。 在规划分析时，还应考虑来自鼠标和键盘以外的设备的控制，例如平板电脑或手机上的触摸。  2.2 具体开发与测试 在响应式开发模式下，开发是基于灵活的网格。 各种组件可以很容易地添加到布局中，因此在最初的设计中并没有计划各种组件。 但是在开发过程中，开发者需要在各个阶段进行组件设计和测试前端响应式开发，对各个组件的代码进行优化也是必不可少的。 通过规划人员、设计人员和开发人员之间的良好协作，可以避免因必要的修改而导致的各种问题。 在开发的每个阶段，都应该在多种浏览器和屏幕尺寸下进行测试，以便及早发现问题，以及某些移动环境与框架图不匹配的错误，并了解设计是否可行不同平台的表现。

测试包括可访问性、导航和表单的可用性以及可读性。 对于屏幕较小的设备，高度压缩全局导航和主要内容之间的部分，或者采用折叠式设计，保证页面跳转后主要内容能够呈现在第一屏，避免用户误以为即页面没有完成跳转。  2.3 改进修改 传统的开发过程没有经过设计和界面的迭代过程，容易忽略项目中的小细节，造成一些问题和与客户期望的冲突。 在响应式开发中，可以使用动态代码向客户展示实施过程的每一步，同时取得进展。 然后，这些早期结果可以推动下一阶段的工作，并使在截止日期前进行关键修改变得容易。  3 响应式Web的实现 3.1 媒体查询（MediaQueries） W3C在CSS3中加入了媒体查询（MediaQueries）模块。 改变页面布局，网页设计者只需要为不同的屏幕分辨率编写不同的页面布局样式，然后互联网设备会根据自身的屏幕分辨率选择适合页面的布局，从而提高用户的浏览体验[6] ]. 上图是简单调用媒体查询方法的截图，其中代码来自于Bootstrap这个比较好用的前端框架。 当屏幕显示的浏览器可视范围大于1200像素时，容器显示效果为1170像素，当屏幕可视范围在992-1200像素之间时，容器显示效果为970像素。

这里的响应式设计最关心的是宽度。 根据用户设备当前的宽度，网页会加载一个替代样式来实现特定的页面样式。 利用CSS3中媒体查询的技术支持，我们可以定义需要调整的容器宽度的断点或临界点。 常见的设备临界点如图 2 所示。断点还允许页面布局在预设点处扭曲，即在桌面桌面上显示 3 列，在移动设备上仅显示 1 列。 大多数 CSS 属性都可以在断点之间进行转换。 断点放在哪里通常取决于内容。 例如，如果一个句子需要换行，您可能需要添加一个断点。 但是，使用断点时需要小心。 如果搞不清楚内容之间的逻辑关系，就很容易搞混。 当我们调整浏览器大小时，使用 MediaQueries 已经可以很好地完成，但这并不能满足移动浏览器。 原因是移动浏览器默认页面是为宽屏设计的，因此将其缩小到整个页面以适应较小的屏幕。 我们需要使用viewportmeta标签设置网页的宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=l）为l，即网页初始大小占屏幕面积的100%。  3.2 流式布局利用媒体查询技术，我们可以根据屏幕宽度、设备方向等各种功能特性改变页面布局，但这种改变有很大的局限性：这种改变方式是突然的，从一组CSS媒体查询规则变异到另一组之间没有任何平滑渐变。

如果窗口在媒体查询设置的固定宽度之外，浏览网页需要水平滚动才能完全浏览。 出现这个问题的原因是网页中的内容是使用绝对单位定义的，例如像素[7]。 要解决上述问题，就需要另一种设计理念：动态布局（或流体布局）。 动态布局的设计思想是所有的设计都尽可能以动态的方式进行操作和布局，而不是采用固定的形式。 流体布局可以概括为以下技术： 3.2.1 百分比宽度（FluidWidth） 传统页面中的表格或div 通常具有固定的像素宽度。 当页面放大或缩小时，宽度仍为原来设置的宽度。 百分比可以用来根据浏览器窗口的宽度自动调整页面布局，不会出现水平滚动条。 当屏幕较大时，页面两侧的固定布局不会出现大面积的空白区域。 当屏幕较小时，内容不会挤成一团。 阅读 [8]。  Ethan Marcotte 在 Dan Cederholm 的书“Flawless Web Design”中写了一章关于流体布局的章节。 在书中，他提出了一个标准化的公式，即“目标元素宽度÷上下文元素宽度=百分比宽度”[9]。 图3左边是演示页面的html导航栏演示代码，中间是对应CSS中的Wrapper和导航代码，右边是CSS定宽到百分比宽度的代码。

转换后代码有问题前端响应式开发，navbar内容会相互挤压。 原因是左侧导航中li标签的css没有设置宽度，链接被包裹在对应的标签中，也就是我们要找的外边距的contextual width。  display:inline-block的作用是将对象渲染为内联对象，但是对象的内容渲染为块对象。 内联对象的旁边将在同一行上呈现，允许有空格。 我们可以改成display:inline，或者把li-a标签中的margin-right属性取成li，问题就解决了。 这个简单的例子表明，设置百分比宽度的关键是找到目标元素宽度对应的上下文元素。  3.2.2 弹性宽度（ElasticWidth） 文本像素px 是相对于显示屏幕的分辨率。  em 是一个相对长度单位，相对于当前对象中文本的字体大小。 如果内联文本的当前字体大小不是手动设置的，它是相对于浏览器的默认字体大小[10]。 作为度量单位的 em 是指特定字母的宽度和高度相对于特定字体的磅值的比率。 目前，网页开发者通常使用像素来控制文字的大小，但不同的屏幕有不同的大小。 以像素为单位的文本在一台设备上可能会按正常比例显示，但在另一台设备上却显得太大或太大。 小的。 因为像素值已经固定，不同的文字往往需要一一设置。

如果我们将标签的文本大小设置为 100%，而其他文本使用相对单位 em，那么这些文本将受到 body 上初始声明的影响。 这样做的好处是，如果客户在所有文字排版完成后提出放大页面文字，我们只能修改正文的文字大小，其他所有文字也会相应放大[11]。  em在某种意义上类似于百分比，文字大小也是按比例缩放的。 两者在技术上都是与父容器级联的，都属于流式布局设计方式。  3.2.3 弹性图片（ElasticImage） 页面上的所有图片一般都是以原始宽度加载。 当包含元素的可见部分的宽度小于图像的原始宽度时，图像的某些部分将被遮挡和隐藏。 我们可以使用图片的百分比宽度来保证图片的最大宽度不大于其包含的元素可见部分的宽度。 当调整分辨率时，图像的最大宽度值将按比例调整，从而使图像可以按比例缩放[12]。  CSS3.0 提供了一种简单的方法来实现流体布局图像的相应缩放。 只需声明类似于以下代码：img{max-width: 100%;}。 使用这个简单的替代 JavaScript 框架（例如 iQuery），以便图像自动调整大小以适合其容器。 当然，这种方法也可以用在其他多媒体标签中。 特别注意在该方法中声明时不要指定标签上图片的宽高。

4 结语 本文总结了响应式网页设计中的开发方式和具体实现方法，阐述了响应式网页开发中值得注意的问题。 尽管响应式网页设计仍然存在争议和缺点，包括过多的资源请求和有限的终端支持之间的矛盾，或者响应式网页设计与移动端在用户体验和视觉风格方面的差异 [13] 。 但是，响应式网页设计仍然可以为网站的开发和维护带来很大的好处。 合理的响应式网页设计可以适应几乎所有设备的屏幕，因此可以为用户提供更友好的界面[14]。 同时，互联网 [15-17] 网站的维护和开发工作量也较低，因为开发和维护单个网站的成本远低于同时开发、维护和同步为每个设备开发的多个网站时间。 参考文献 [1] 张兴志，徐冬冬，贾飞． 基于响应式网页设计的教务系统移动平台的研究与构建[J]． 软件, 2013, 34(6): 5-7.  [2]北衍． 响应式网页设计实现方法研究[J]． 渤海大学学报(自然科学版), 2014, 02: 170-172.  [3] 米海英． 不同设备响应式网页设计分析[J]． 苏州职业大学学报, 2013, 02: 34-37.  [4]EthanMarcotte.Responsivewebdesign[EB/OL].(2010-05-25)[2012-12-01].http:///articles/responsive-web-design/ [5]刘欢，陆北荣。 利用响应式设计构建新型高校门户网站[J]． 中国教育信息化, 2013, 09: 71-77.  [6] 赵建宝． 响应式网页设计的关键技术与设计过程[J]． 计算机知识与技术, 2014, 05: 1066-1068.  [7] 徐中波．  “响应式”网页布局设计浅析[J]． 黑龙江科技信息, 2012, 26: 106. [8] 王宇, 潘明明． 响应式网页设计初探[J]． 北京印刷学院学报, 2014, 03: 13-15.  [9] 张聪聪． 响应式网页设计的实现与优化分析[J]． 戏剧之家，2015 年，05:166。  [10] CSS2.0中文手册[EBIOL]。  http:///cssref/。  [11] 本弗兰。 响应式网页设计与 HTML5 和 CSS3[M].  PacktPublishing, 2012, 4. [12] 张书明． 基于响应式网页设计的网页模板设计与实现[J]． 计算机与现代化, 2013, 06: 125-127.  [13]罗强,刘玉梅． 浅谈响应式网页设计[J]． 科学技术, 2013, 21: 93. [ 14] 崔松剑. 响应式网页设计[J]． 信息与计算机(理论版), 2013, 10: 25-26.  [15] 李少辉． 面向对象与MVC框架的融合[J]． 软件, 2013, 34(1): 82-84.  [16] 李建新． 网络条件下的办公自动化建设[J]． 软件, 2013, 34(1): 98-99.  [17] 张謇． 移动互联网时代的移动商务[J]． 新型工业化, 2011, 1(6): 41-48.