代码改变世界

响应式网站之测试工具

2013-01-10 19:09  臭小子1983  阅读(242)  评论(0编辑  收藏  举报
Vote up!
15+ Responsive设计的测试工具

有很多工具和技术,能创建一个完美的网站,针对于不同的用户群体。同时,网页设计已经不在单纯是一个简单的布局,相对来说比以前复杂的多。因为许多不同的浏览器分辨率和设备的出现,传纺的网页展示风格并不适合所有的设备,这样就要求Web页面出来要适应于不同的屏幕分辨率和不同的终端设备,比如说移动终端设备。值得庆幸的是,Responsive设计可以实现各种分辨率和移动终端的效果。而且有很多工具来创建创建这种技术,可以让你的网站外观在不同设备显示不同效果。今天为大家搜集了responsive设计的测试工具,希望大家在工作中能运用得上。

1、Responsive

15 Best Responsive Design Tools to test Responsive Design

这是一个测试工具,可以让你看到测试网站在在同一个屏幕上看到不同的分辨率下的效果,不需要切换到不同的模式。

2、Screenfly

15 Best Responsive Design Tools to test Responsive Design

Screenfly测试网页在各种移动设备和平板电脑下的渲染效果。它还可以测试电视和各种桌面分辨率的页面显示效果

3、Protofluid

15 Best Responsive Design Tools to test Responsive Design

Protofluid工具需要购买,提供了近100种效果,可以快速制作的液体布局,自适应CSS和响应性设计。

4、RWD Demonstration

15 Best Responsive Design Tools to test Responsive Design

可以测试web页面在iPhone、iPad和桌面下效果。

5、Resize My Browser

15 Best Responsive Design Tools to test Responsive Design

调整浏览器大小的一个在线工具,可以让你改变你的当前的浏览器设置和自定义的预设。它显示的屏幕分辨率为15个不同的设备和大小不同的设备。而且你还可以随时自定义你需要的分辨率,来改变你显示器的设置。

6、Responsinator

15 Best Responsive Design Tools to test Responsive Design

Responsinator是一种快速、简单的方法,看看你的网站在Kindle,iPhone、iPad和Android设备下的外观。它不需要下载,只是键入网站地址就OK。

7、Resizer

15 Best Responsive Design Tools to test Responsive Design

Resizer是一个工具,您可以添加到你的书签栏。它包括尺寸不同的平板电脑,桌面和移动设备,并可作为一个Chrome扩展。

8、Bricss

15 Best Responsive Design Tools to test Responsive Design

您可以选择6预定义的设备大小和添加尽可能多的自定义大小。你测试网站的结果显示在一个页面上。

9、Screenqueri.es

15 Best Responsive Design Tools to test Responsive Design

Screenqueri.es是一个更全面的工具,显示了一个网站在特定的设备接口视图。超过25个设备出现,还有一个工具来拍下一个快照,以便你可以解决问题

10、ResponsivePX

15 Best Responsive Design Tools to test Responsive Design

ResponsivePX允许您快速测试一个网站在不同的宽度和高度,您可以定制

11、Adobe Shadow

15-responsive-design-testing-tools-01-adobe-shadow

12、Aptus

15-responsive-design-testing-tools-02-aptus

13、Opera Mobile Emulator

15-responsive-design-testing-tools-04-opera-mobile-emu

14、Responsive Design Bookmarklet

15-responsive-design-testing-tools-06-responsive-design-bookmarklet

15、Responsive.is

15-responsive-design-testing-tools-07-responsive-is

2012年10月25日更新:

16、VIEWPORT RESIZER

15-responsive-design-testing-tools-07-responsive-is