响应式web设计:WEBJX收集50个响应式设计工具(3)

http://www.itjxue.com  2015-08-06 23:02  来源:未知  点击次数: 

21. FitText

Paraval公司的另一个宝贝是FitText.js,是一个JQuery插件,使用头版头条风格的web响应式设计来设计并适应用户设备的尺寸。细节请看链接。trentwalton.com/2011/05/10/fit-to-scale/

22. slabText

受到了FitText和SlabType算法的启发,Brian McAllister做的slabText是一个jQuery插件,让粗体文本块响应式重新调整尺寸的同时还能报账定义的宽度。

Media Query的工具

估计现在您已经有了应对不同设备访问时页面布局的策略,流体Grid和流体图像,现在您需要Media Queries来把页面元素改成响应式的状态了。

23. Respond.js

响应式设计的一个问题是,有些浏览器太落伍,不能读取媒体查询。或许这并不是你的目标受众的问题,但这仍然是一个适用旧版本浏览器的用户的好的实践 方法,Respond.js是由Scott Jehl制作的,只需要支持属性的最大最小宽度即可。需要了解更多请点击链接。http://filamentgroup.com/lab /respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/

24. CSS3-Mediaqueries.js

这个工具是由Wouter van der Graaf制作的,使得老版本IE或其他浏览器用户能够有效地测试和应用各种media queries.

25. Adapt.js

Nathan Smith,是960.gsgrid系统最初版本的作者,他编写了Adapt.js是一个能检测浏览器规模的脚本,并且能够伺服所需要的样式表,就像 Media queries一样但不使用Media Queries,意味着可以在老版本浏览器上也照样能运行。

26. Categorizr

这个设备检测是使用完全相反的视角来进行。Brett Jankord的Categorizr脚本假定了用户都是移动设备,除非检测到桌面浏览器或平板电脑。这样是你的服务资源对各种浏览器更加和谐了。

 

响应式设计(以及移动开发)的模板工具

有效率的响应式设计的工作流的灵魂就是让模板来方便整个设计过程,让工作流从设计浏览器时更早地移动到下一个缓解。大部分模板工具都结合了上述的那些工具整合进一个package中:一个灵活的GRID,使用脚本语言加强,同时来实现移动优先,内容输出的哲学思想。

27. 320 and Up

Andy Clarke的320 and Up是一款移动优先的模板工具,它继承了很多流行的web设计工具,比如LESS和Bootstap等。这款工具是个轻量级的敏捷方法,能迅速让一个站点 建立并运行起来。您也可以点击链接看一下我们对Andy的访谈(http://www.netmagazine.com/interviews /andy-clarke-new-320-and),这篇文章他更多地对我们讲解了新版本的性能。

28. Gridless

Gridless是一个HTML5与CSS3的模板工具,可以作为您的响应时设计的服务基础,它更关注拓扑以及跨浏览器的整合性能。

29. Skeleton

与之前描述的两种模板工具不同,Skeleton开发工具的起点是最小化的解决方案。这款工具由Dave Gamache设计,基于960.gs Grid system把规模减小到移动领域。Skeleton同时自诩是一个伟大的样式框架并适合在其之上构建系统。

30. Bootstrap

由Twitter构建,并且现在已经是开源的了,这是一款框架和一系列的组件,适合快速在线构造一个站点,他的第二个版本各个核心部分都已经是响应式工作的了。

 

插件,shim和polyfill

(译者注:shim与polyfill暂保留原文,为不影响关键词的理解)

尽管现在的浏览器和软件都趋于变得更加适应响应式设计,但是有时候我们也不得不使用一些额外的工具来保障用户的一致性体验。

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章