手機、平板燈手持設備的增多,網站要順應變化,就必需要作響應式開發,響應式網站最大的特色在於能夠在不一樣設備下呈現不一樣的佈局,是基於html5+css3技術,目前愈來愈多的網站開始採用了響應式設計,而下面15款工具能夠方便測試你的html5響應式效果。php
Responsinator
http://www.responsinator.com/
Responsinator提供了你們在不一樣設備viewport下查看網站效果的特性,提供了iphone,android,ipad,kindle及其多種設備上的預覽效果,你能夠方便的看到須要支持的設備的響應式設計效果圖。
Responsive.is
http://responsive.is/
responsive提供了5種設備下的預覽效果展現
Kuapingce
http://www.kuapingce.com/
跨屏測 取自「跨屏」+「評測」,結合在一塊兒取名 跨屏測,網址是跨屏測的拼音 ,切圖網 [ www.qietu.com ] 建立於2015年12月。它是國內首個致力於跨屏幕響應式測試的工具類的產品,目的是爲了幫助你查看你的網站的跨屏幕(響應式)效果,跨屏測收集了主流 屏幕的尺寸大小,方便你快速瞭解網站在不一樣設備下的樣子。
Responsive Web Design Testing Tool
http://mattkersley.com/responsive/
相似responsivator,可是界面更簡單
Responsivepx
http://responsivepx.com/?m.gbin1.com#1035x480&scrollbars
容許你用拖動的方式來修改窗口大小,模擬不一樣的設備屏幕
screenqueri.es
http://screenqueri.es/
它支持localhost本地方式測試你的應用或者網站。
Aptus
https://itunes.apple.com/gb/app/aptus/id510487565?mt=12
一個工具類的瀏覽器,能夠幫助你測試響應式設計
Bricss
http://www.benjaminkeen.com/open ... design-bookmarklet/
一個幫助你測試響應式的書籤,你能夠方便的整合到你的瀏覽器裏
Izilla Media Query Debugger
http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
這個js能夠幫助你添加僞元素到body元素上用來偵測寬高 ,固然你也可使用他們提供的bookmark:http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
Screenfly
http://quirktools.com/screenfly/
支持4種設備的在線響應式設計測試工具,而且還提供相關開發的設計圖和文檔。
ViewPort Resizer
http://lab.maltewassermann.com/viewport-resizer/
另一個書籤式的工具
Jresizer
http://www.toddmotto.com/jresize ... ponsive-development
一個jQuery的響應式開發工具插件,幫助你建立響應式的窗口,方便你的開發和設計流程
Resize My Browser
http://resizemybrowser.com/
一個簡單的幫助你建立指定寬高新開窗口的web工具
juicer
http://juicecreative.co.uk/juicer/website/index.php
一個在線的展現響應式的工具,支持iphone,android等設備的顯示,帶有實物圖。
ish
http://bradfrostweb.com/demo/ish/
一個比較新的在線查看響應式效果的web工具,支持不一樣尺寸的展現。
原文地址:http://bbs.qietu.cn/forum.php?mod=viewthread&tid=15059css