15款html5響應式網站跨屏幕測試工具

手機、平板燈手持設備的增多,網站要順應變化,就必需要作響應式開發,響應式網站最大的特色在於能夠在不一樣設備下呈現不一樣的佈局,是基於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

相關文章
相關標籤/搜索