響應(yīng)式設(shè)計幾乎是當(dāng)代網(wǎng)頁設(shè)計的基礎(chǔ)構(gòu)成之一。在實際設(shè)計和開發(fā)的過程中，想要讓網(wǎng)站按照設(shè)計響應(yīng)不同尺寸屏幕，設(shè)計師和前端需要花費相當(dāng)?shù)臅r間來進(jìn)行測試和優(yōu)化。所以，今天我們搜集了7款功能強大的響應(yīng)式頁面測試工具，下面就一一介紹一下。
?

1. XRESPOND

這款名為 XRespond 的工具自稱為“虛擬設(shè)備實驗室”，這個稱號其實是名副其實的。

通過Xrespond 打開網(wǎng)頁，你可以看到它在不同屏幕尺寸下的樣子，整個布局是橫向的，所以你需要橫向滾動頁面才能看到它所有的樣子。

屏幕上方的標(biāo)簽會標(biāo)識出它是為什么設(shè)備所匹配的，在下拉框當(dāng)中能夠選出不同品牌不同型號的智能手機(jī)、平板和筆記本屏幕，以預(yù)覽效果。
?

2. RESPONSINATOR

和 XRespond 的功能相似，Responsinator 也提供了不同屏幕尺寸下的預(yù)覽效果。不過，Responsinator 的布局和前者不同，縱向滾動更符合日常的交互邏輯。

你可以在 Responsinator 中看到最常用的移動端設(shè)備，比如iPhone、iPad、Nexus 系列，包含橫屏和豎屏的預(yù)覽。

Responsinator 還支持 http 鏈接和 https 之間的切換，應(yīng)用會根據(jù)你輸入的鏈接自動識別和適配，并且會避免SSL錯誤。
?

3. RESPONSIVE DESIGN CHECKER

想要快速檢測一個網(wǎng)站是否是響應(yīng)式的并不難，使用 Responsive Design Checker 來檢測就好了，這款工具能夠非常便捷地幫你自定義屏幕尺寸和分辨率，來進(jìn)行更深入的測試。

你可以在邊欄中，找到預(yù)定義的設(shè)備的屏幕尺寸/分辨率，比如Nexus 平板電腦，Kindle 或者 Google Pixel 手機(jī)。

在這里同樣可以對大屏尺寸進(jìn)行測試，即使是在小屏幕上運行這一工具也同樣可以達(dá)到效果。目前Responsive Design Checker 支持最大 24 英寸的屏幕。

4. GOOGLE MOBILE TEST

Google 為網(wǎng)站管理員和網(wǎng)頁開發(fā)者提供了不少優(yōu)質(zhì)的工具，而 Google Mobile Test 也是其中之一。

這款工具不是真正意義上的預(yù)覽工具，也不能幫你精確地判斷UI中的錯誤。但是它是一款超級實用的移動端工具，它能幫你在移動設(shè)備上快速定位網(wǎng)站中的問題。

一旦開始運行測試，測試結(jié)果一定是以失敗或者成功來結(jié)束的。對于設(shè)計師而言，這個結(jié)果可能看起來比較粗糙，但是Google 會針對需要改進(jìn)的區(qū)域和元素進(jìn)行標(biāo)識，并且提供改進(jìn)的提示。

這個工具也許不少一個完整的響應(yīng)式工具，但是它是非?？煽康囊苿佣藴y試工具，并且是用來搜集和整理信息的好地方。

5. MATT KERSLEY’S RESPONSIVE TOOL

設(shè)計師兼開發(fā)者 Matt Kersley 發(fā)布的這款免費的響應(yīng)式布局測試工具，是諸多測試工具中最樸素的一款。

雖然沒有太多裝飾，但是這款工具內(nèi)置了5種固定的寬度用來測試，分別是 240px，320px，480px，768px，1024px。

預(yù)覽界面中有滾動條，可以借此來瀏覽其中內(nèi)容，但是你不能點擊其中的內(nèi)容，所以這款工具極其適合測試單個頁面。

6. AM I RESPONSIVE?

當(dāng)然，如果你測試頁面的時候，需要測試過程中頁面像素完美的話，那么你還是不要用 Am I Responsive 這款工具了。

相反，如果你的測試需要快速測試頁面在幾款常見設(shè)備上的顯示效果的話，倒是個不錯的選擇。

同樣是輸入鏈接生成預(yù)覽，Am I Responsive 能幫你測試出頁面在智能手機(jī)、平板電腦、筆記本電腦和桌面端設(shè)備上的瀏覽體驗。

這款工具的亮點在于，它能在截圖的同時，生成對應(yīng)設(shè)備的外觀，和頁面的尺寸比例進(jìn)行匹配。

7. DESIGNMODO RESPONSIVE TEST

這款名為 Designmodo Responsive Test 的工具是著名的設(shè)計博客 Designmodo 所推的工具，免費，易用，可以針對特定的寬度來測試網(wǎng)頁的顯示效果。

這款工具最大的優(yōu)點是其中基于網(wǎng)格的頁面設(shè)置。你可以使用這款網(wǎng)頁應(yīng)用來測試網(wǎng)頁的像素點和頁面內(nèi)置的柵格系統(tǒng)。

除了使用預(yù)制的寬度來測試，你還可以自己拖動來調(diào)整寬度進(jìn)行預(yù)覽。

【別錯過這些響應(yīng)式網(wǎng)頁的設(shè)計技巧】

1. 《響應(yīng)式設(shè)計 — web開發(fā)最佳實踐手冊》
2. 《有對比才有看頭!響應(yīng)式Web設(shè)計的9項基本原則》
3. 《淺談思路！七個技巧幫你搞定響應(yīng)式網(wǎng)頁中的圖片設(shè)計》

原文地址：webdesignerdepot
原文作者：JAKE ROCHELEAU
優(yōu)設(shè)譯文：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com