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

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

41. Responsive Design Bookmarklet

Victor Coulon制作了一款简单有效的书签工具,它就放进工具栏里面,您可以在任何也免激活它然后您就可以从普通屏幕尺寸和不同的预设尺寸之间切换并且查看区别了。

42. Responsive Design Test Bookmarklet

这个书签工具是由Benjamin Keen制作,支持更加自定义风格的策略,可以让您定义自己的设备尺寸以及其他您希望的尺寸。激活它之后它就可以显示各种您选定的尺寸进行显示以方便您比较。

43. Screenfly

这是由QuirkTools公司出品的工具,使用它您就可以测试在不同解决方案时的站点效果,可以包含桌面,平板,移动设备以及电视。桌面测试目前还局限于Safari,平板和移动设备的浏览器有很多的选择,不过电视访问的浏览器也只支持Opera。

44. Media Query Indicator

Johan Brook提供了一个纯CSS的方式来测试媒体查询,以浏览器方式出发。这款工具很好用,可以设施断点进行测试和运行。

45. Shim

重新设计波士顿环球报时使用的工具之一,RWD运动的海报男孩(这可能是个典故,译者并不清楚所指是什么)Shim是一个Node.js,他可以在同一个Wifi网络中运行一个页面还支持很多不同的设备,使得跨设备测试更加容易。

46. Drive-In

如果您并没有Node.js服务器部署以支持Shim,那么这款由Scott Jehi做的叫做Drive-in的简单版本在功能上和Shim一样,不过它使用PHP,Apache和一个.htaccess文件。

47. Adobe Shadow

Adobe公司继续推进web技术,退出了这一款远程调试工具。安装Shadow之后还需要Chrome浏览器在Mac或者Windows平台上扩展,现在还增加了Android和iPhone的客户端,然后您就可以在不同的设备之间分享页面体验了。

48. Opera Mobile Emulator+Remote Debug

安装Opera以及OperaMobile Emulator是一个十分简单的方式以便调试移动页面,二者之间使用远程调试选项通讯。其建立过程简单快捷,测试起来比webkit更加有效。

未来的启发

想知道别人都怎么设计响应式功能么?

49. MediaQueri.es

可能您还没见过它,但是这个MediaQueri.es站点的访问量在持续增长,已经要超越响应式站点了。

50. @RWD

Ethan Marcotte运营着一个推特账户,发布最新的)RWD响应式页面设计)新闻和工具,以及Showcase案例

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章