響應式設計幾乎是當代網頁設計的基礎構成之一。在實際設計和開發的過程中，想要讓網站按照設計響應不同尺寸螢幕，設計師和前端需要花費相當的時間來進行測試和優化。所以，今天我們蒐集了 7 款功能強大的響應式頁面測試工具，下面就一一介紹一下。

　　1.XRESPOND

　　這款名為 XRespond 的工具自稱為 “虛擬裝置實驗室”，這個稱號其實是名副其實的。

　　通過 Xrespond 開啓網頁，您可以看到它在不同螢幕尺寸下的樣子，整個佈局是橫向的，所以您需要橫向滾動頁面才能看到它所有的樣子。

　　螢幕上方的標籤會標識出它是為什麼裝置所匹配的，在下拉框當中能夠選出不同品牌不同型號的智慧手機、平板和筆記本螢幕，以預覽效果。

　　2.RESPONSINATOR

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

　　您可以在 Responsinator 中看到常用的移動端裝置，比如 iPhone 、 iPad 、 Nexus 系列，包含橫屏和豎屏的預覽。

　　Responsinator 還支持 http 連結和 https 之間的切換，應用會根據您輸入的連結自動識別和適配，並且會避免 SSL 錯誤。

　　3.RESPONSIVE DESIGN CHECKER

　　想要快速檢測一個網站是否是響應式的並不難，使用 Responsive Design Checker 來檢測就好了，這款工具能夠非常便捷地幫您自定義螢幕尺寸和解析度，來進行更深入的測試。

　　您可以在邊欄中，找到預定義的裝置的螢幕尺寸/解析度，比如 Nexus 平板電腦，Kindle 或者 Google Pixel 手機。

　　在這裏同樣可以對大屏尺寸進行測試，即使是在小螢幕上執行這一工具也同樣可以達到效果。目前 Responsive Design Checker 支持大 24 英寸的螢幕。

　　4.GOOGLE MOBILE TEST

　　Google 為網站管理員和網頁開發者提供了不少優質的工具，而 Google Mobile Test 也是其中之一。

　　這款工具不是真正意義上的預覽工具，也不能幫您精確地判斷 UI 中的錯誤。但是它是一款超級實用的移動端工具，它能幫您在移動裝置上快速定位網站中的問題。

　　一旦開始執行測試，測試結果一定是以失敗或者成功來結束的。對於設計師而言，這個結果可能看起來比較粗糙，但是 Google 會針對需要改進的區域和元素進行標識，並且提供改進的提示。

　　這個工具也許不少一個完整的響應式工具，但是它是非常可靠的移動端測試工具，並且是用來蒐集和整理資訊的好地方。

　　5.MATT KERSLEY’S RESPONSIVE TOOL

　　設計師兼開發者 Matt Kersley 發佈的這款免費的響應式佈局測試工具，是諸多測試工具中樸素的一款。

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

　　預覽介面中有滾動條，可以藉此來瀏覽其中內容，但是您不能點選其中的內容，所以這款工具極其適合測試單個頁面。

　　6.AM I RESPONSIVE?

　　當然，如果您測試頁面的時候，需要測試過程中頁面畫素的話，那麼您還是不要用 Am I Responsive 這款工具了。

　　相反，如果您的測試需要快速測試頁面在幾款常見裝置上的顯示效果的話，倒是個不錯的選擇。

　　同樣是輸入連結生成預覽，Am I Responsive 能幫您測試出頁面在智慧手機、平板電腦、膝上型電腦和桌面端裝置上的瀏覽體驗。

　　這款工具的亮點在於，它能在截圖的同時，生成對應裝置的外觀，和頁面的尺寸比例進行匹配。

　　7.DESIGNMODO RESPONSIVE TEST

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

　　這款工具大的優點是其中基於網格的頁面設定。您可以使用這款網頁應用來測試網頁的畫素點和頁面內建的柵格系統。

　　除了使用預製的寬度來測試，您還可以自己拖動來調整寬度進行預覽。