HTML5 CSS和JavaScript创建响应设计的策略

日期: 2012-11-27 作者:Cameron McKenzie翻译:蒋红冰 来源:TechTarget中国 英文

正日益负责把他们的应用程序与多种不同的设备工作的开发团队面临的一个最大的挑战是,怎样创建出最好的用户体验,而不用因为过度的工作量加重了团队的负担,而且没有对未来应用程序维护的吓人的成本。毕竟,办公室里的每个人都有一个117英寸屏幕,支持1024 x768分辨率的RIM装置,并且每一个新雇佣的人员都有相同的RIM装置,玩弄完全相同的屏幕分辨率的日子已经一去不复返了。现在在BYOD(自带设备)的世界,UI开发人员必须开发出能够正确显示在各种不同和不同的屏幕尺寸的设备上的应用。   创建网站,能够在不同的分辨率的屏幕上良好运行,一直都是一个挑战,平板电脑 和智能设备,以及它们的不同大小的不断增殖也使……

我们一直都在努力坚持原创.......请不要一声不吭,就悄悄拿走。

我原创,你原创,我们的内容世界才会更加精彩!

【所有原创内容版权均属TechTarget,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用。】

微信公众号

TechTarget微信公众号二维码

TechTarget

官方微博

TechTarget中国官方微博二维码

TechTarget中国

正日益负责把他们的应用程序与多种不同的设备工作的开发团队面临的一个最大的挑战是,怎样创建出最好的用户体验,而不用因为过度的工作量加重了团队的负担,而且没有对未来应用程序维护的吓人的成本。毕竟,办公室里的每个人都有一个117英寸屏幕,支持1024 x768分辨率的RIM装置,并且每一个新雇佣的人员都有相同的RIM装置,玩弄完全相同的屏幕分辨率的日子已经一去不复返了。现在在BYOD(自带设备)的世界,UI开发人员必须开发出能够正确显示在各种不同和不同的屏幕尺寸的设备上的应用。

  创建网站,能够在不同的分辨率的屏幕上良好运行,一直都是一个挑战,平板电脑 和智能设备,以及它们的不同大小的不断增殖也使得问题更加复杂化。在2012看10月,在北美所有电脑产品的销售市场上,平板电脑有史以来的第一次占了是大的比重,这意味着无法预言大小的设备正如洪水一样泛滥,从6英寸的迷你版本到12英寸的怪物版,两者都既可以水平扩展也可以垂直扩展,都将会进入到工作场所。所以开发者怎样交付应用,来跟上这个设备类型和屏幕分辨率大混乱的时代?在许多情况下,响应设计就是答案。

  响应设计救援

  “响应的而已或响应的设计,正如你所知道的是你的基础设计,来处理不同的设备大小,”Nate Cavanaugh说,他是Liferay UI设计总监,而且也是强大的JavaScript库AlloyUI.的创造者之一。当你看见一个引入了响应设计的页面时,你可能不知道这个页面因为设备的不同设计的渲染也不同的。在一个高分辨率的桌面上,每一个Web应用都是一样的,功能完全、丰富的Web应用。但是随着屏幕大小的改变,视角也会动态的调整和改变他们本身。

  “你有不同的突破点,通过这些突破点设计可以随着它的尺度而改变,”Nate说。在桌面上,页面的功能是完整的。“但是随着你压缩设备的大小,应用程序可能就会开始移除一些功能,或者把一些功能放置最后,把优先仅给更重要的内容。”

  开发响应设计

  因此,开发者要怎样创建响应设计?

  达到这一效果的一种方法是使用媒体查询。“从根本上说,它是CSS的一个功能。你可以针对不同的设备大小或设备的不同方面,只应用CSS的属性,这样你的设计就可以根据设备的宽度、窗口的大小和其它这类的东西而彻底改变,”Nate说。

  另一个方法是只使用JavaScript。“你只能通过JavaScript来测试屏幕的大小,而且随着窗口的改变,JavaScript可以跟着改变和更新CSS样式,并把CSS只用在那个特定的大小上。”

  当然,你不必要创建自己的JavaScript构架不实现响应设计。辅助程序,一个建立在Twitter内的JavaScript库,但现在分布在Apache License v2.0内,它可能是现今存在的可交付响应效果的最流行的库之一。同样地,有些开发者正使用像AlloyUI这样的JavaScript库有效地创建响应设计,使用AlloyUI,的Viewport组件和库的其它部分来创建灵活且可变形的层。

  事实是,因为市场上有很多设备,所以在涉及到针对特定的设备和设备类型开发页面时,UI开发者不得不找到折衷的地方。为市场上每一个不同的屏幕分辨率重写每个应用程序是很不明智的。但是因为像媒体查询和JavaScript库,例如辅助程序.js这样的技术,开发响应设计的应用程序现在是比以前更引人注目的一个方法。

翻译

蒋红冰
蒋红冰

TechTarget云计算主编,主要负责云计算和虚拟化网站的内容建设。长期专注于IT前沿技术,对云计算、虚拟化、人工智能、区块链等技术都有了解;对行业趋势、市场动态有一定的洞察。

相关推荐

  • AWS MEAN堆栈+JavaScript=快速搭建应用

    开发人员在构建Web应用时有许多选择。市面上有无数的框架和语言可选,而像AWS这样的云平台可以方便地部署和扩展应用程序。

  • 对话陈本峰:HTML5究竟给企业带来了什么?

    智能手机的普及,移动计算的应用,带火了HTML5技术。尤其,当我们看到微软朋友圈被“故宫与腾讯合作”的广告刷屏,我们不得不承认,HTML5技术确实很重要,但是HTML5究竟带来了什么,与以往移动技术有什么不同?

  • HTML5促进企业移动化服务走向极致

    在企业困扰于传统移动化方式过于复杂时, HTML5凭借其天然的跨平台特性,乘势而起并逐渐得到企业的关注。可是,由于HMTL5标准建立时间不长,展示性能及稳定性更是需要和浏览器有一个良好的兼容,除此之外企业更是缺乏实际应用经验,所以基于HTML5技术的企业级服务市场还处于一片初创状态。

  • HTML5如何在企业中深入使用?

    据调查显示全球拥有490亿 在线设备,比人口数量多几倍,这说明平均每人拥有不只一部分在线设备。由此可见,全球移动生态系统是多么的庞大。