用友UAP马太航：解析移动开发中的响应式布局

来源：互联网

2014/10/29 16:08:37

移动互联占据互联网市场之后，市场上的终端设备日新月异，谷歌眼镜，苹果智能手表等新型穿戴设备相继发布。仅手机一类品种每年的增长量就有400种之多。高分辨率设备也出现在市场上，4k时代刚刚被大家所熟知，5k屏已经悄然出现在市场中。面对如此多的终端设备，给网站设计者，开发者提出了各种严酷的考验。

分享到：新浪微博腾讯微博

本文关键字：用友 UAP 移动互联

然后，弹性图片。在现代浏览器中要实现图片随着流动布局相应缩放非常简单，只要在CSS中作如下声明：

img{max—width；100%；)

这行代码对于大多数嵌入网页的视频也有效，所以可以写成：

img，object{max width；100%；}

对于不支持max width的老版本IE，只能写成：img{width；100%；) ，另外windows平台缩放图片时，可能出现图像失真现象.这时，可以尝试使用IE的专有命令：

img{一ms—interpolation—mode；bicubic；}

或者，使用Ethan Marcotte的imgSizer.js.

addLoadEvent(functionO{

var imgs=document.getElementById(”content”).getElementsByTagName(”img”)；

imgSizer.collate(imgs)；

})；

这样就可以使图片自动缩放到与其容器100%匹配。

那么该如何进行响应式布局的优化？ 用友UAP告诉开发者，可以分三个层面来进行。

第一，减少开发量。 响应式布局不能是简单对不同视口做逻辑判断，然后每种视口设计出一套布局。这样不仅要维护页面样式同时还要维护视口逻辑。那工作量实际上已经大于多站点对样式的维护量。将响应式布局抽出来做成中间件和布局工具。让响应式布局对开发者透明，开发者抛开响应式的逻辑，只需要做好展示变化后的对应关系以及对页面中内容的填充。

开发响应式组件。从布局的角度看页面不是一个整体，而是多个组件组成，在不同视口中组件将展现成不同的形态。这些形态在长期的开发，使用过程中会形成稳定的样式和结构。将这些样式和结构封装起来，赋予其响应式的功能，这样也可以大量的减少开发过程与维护过程中的工作量。

第二，减少代码量。 HTML、CSS和Javascript中都会有代码量的增加及冗余。将响应式布局的开发过程移动到专业的开发工具中(比如less)，工具最后生成不同视口的布局文件，使用media query

动态加载技术加载目前需要的CSS和javascript代码可以很好的减少代码冗余。

局部使用模板方法，其实模板方法单独使用也能很好的支持跨终端设备，但其与多站点相类似，可以理解其为前端的多站点，后台公用一套接口，前端是多套站点。那么模板可以局部使用，比如说表格的行，我们定义多种表格的行的模板针对不同的视口。使用模板配合的规则是将模板降低到组件层级，而不是页面层级。

第三，优化设计结构。 在设计响应式布局时，由于要兼容到不同的视口，很多在一种视口很优秀的设计方案被放弃，而采用了兼容的方案。这里边有两个原则。移动优先原则和内容优先原则。这两个原则作为取舍设计方案的标准。好的设计本身也是需要长时间的积累，更多人的认可，从过程中整理出来。

随着移动智能设备和智能家电的普及。以及电脑端浏览器更新迭代速度越来越快(IE一年一更新。FireFox、Chrome、Opera平均4个月到半年更新一次)。并且现在的新版本浏览器都是默认在链接因特网时自动为用户更新到最新版本。可以预见在未来的1～3年后，响应式布局将会成为网页布局技术的主流.会取代现有的布局技术。

关于【用友UAP】：

用友UAP是用友公司从多年的应用软件研制过程中提炼出模型、模板、开发工具、应用框架、中间件、基础技术类库，以及软件方案、实施和运维管理工具等成果，以可视化的形式集成在一起，提供包括覆盖硬件、基础软件等IT基础设施的IaaS服务，覆盖软件开发、发布、集成、部署、测试、运维、管理等PaaS服务的大型企业与组织计算平台。

用友UAP平台是一体化平台，其中包括了中间件、开发平台、集成平台、商业分析平台(用友BQ)、数据平台、云管理平台、WEB平台、移动平台、RIA平台、社交平台等多个领域产品。

责编：李玉琴