16個高效測試響應式設計介面工具

來源:互聯網
上載者:User

 

響應式的設計現在越來越受設計師推崇,面對這越來越多的響應式設計頁面,我們需要找到高效的測試載入器來驗證設計的合理和正確,在今天這篇文章中,我們將介紹16款協助你線上測試響應式頁面設計的工具,希望大家喜歡!

Responsinator

Responsinator提供了大家在不同裝置viewport下查看網站效果的特性,提供了iphone,android,ipad,kindle及其多種裝置上的預覽效果,你可以方便的看到需要支援的裝置的響應式設計效果圖。

Responsivator

和responsinator不一樣,responsivator提供了不同尺寸下的顯示效果圖

Responsive.is

responsive提供了5種裝置下的預覽效果展示

Responsive Web Design Testing Tool

類似responsivator,但是介面更簡單

Responsivepx

允許你用拖動的方式來修改視窗大小,類比不同的裝置螢幕 

screenqueri.es

這個工具在gbin1以前的文章中我們曾今介紹過,如果想更多瞭解請閱讀 分享一個協助你線上測試響應式設計的web工具- Screenqueri.es,最有意思的是它支援localhost本地方式測試你的應用或者網站。

Aptus

一個工具類的瀏覽器,可以協助你測試響應式設計 

Bricss

一個協助你測試響應式的書籤,你可以方便的整合到你的瀏覽器裡

Izilla Media Query Debugger

這個js可以協助你添加虛擬元素到body元素上用來偵測寬高 ,當然你也可以使用他們提供的bookmark:http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html

Screenfly

支援4種裝置的線上響應式設計測試載入器,並且還提供相關開發的設計圖和文檔。具體請查看我們過去文章:分享一個在不同用戶端查看網站的工具- Screenfly

Firefox Developer Tools

如果你使用Firefox的話,你可以直接使用開發工具實現,快速鍵(Ctrl + shift + M)

ViewPort Resizer

另外一個書籤式的工具

Jresizer

一個jQuery的響應式開發工具外掛程式,協助你建立響應式的視窗,方便你的開發和設計流程

Resize My Browser

一個簡單的協助你建立指定寬高新開視窗的web工具 

juicer

一個線上的展示響應式的工具,支援iphone,android等裝置的顯示,帶有實物圖。

ish

一個比較新的線上查看響應式效果的web工具,支援不同尺寸的展示。

以上就是16款我們收集的線上的和本地的響應式測試載入器,相對來說,線上工具更適合和你的朋友或者同事分享,本地工具適合開發時調試,具體的使用請根據自己需要來選擇。希望你喜歡。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。