響應式設計幾乎是當代網(wǎng)頁設計的基礎之一。在實際的設計和開發(fā)過程中，如果您希望網(wǎng)站根據(jù)設計響應不同尺寸的屏幕，設計人員和前端需要花費大量時間進行測試和優(yōu)化。因此，今天我們收集了7個強大的響應式頁面測試工具，下面將介紹它們。

1.XRESPOND

名為XRespond的工具稱自己為“虛擬設備實驗室”，這是一個名副其實的名稱。通過使用Xrespond打開頁面，您可以看到它在不同屏幕尺寸下的顯示效果。整個布局是水平的，因此您需要水平滾動頁面以查看其外觀。屏幕頂部的標簽將標識它與設備匹配的原因。在下拉框中，您可以選擇不同品牌的智能手機，平板電腦和筆記本屏幕的不同品牌來預覽效果。

2.RESPONSINATOR

與XRespond類似，Responsinator還提供不同屏幕尺寸的預覽。但是，Responsinator的布局與前者不同，垂直滾動更符合日常交互邏輯。您可以在Responsinator中查看常用的移動設備，例如iPhone，iPad，Nexus系列，包括橫向和縱向預覽。 Responsinator還支持在http鏈接和https之間切換。根據(jù)您輸入的鏈接自動識別和調(diào)整應用程序，并避免SSL錯誤。

3.響應設計檢查員

快速檢測網(wǎng)站是否響應并不困難。使用自適應設計檢查器進行檢測。此工具可以幫助您輕松自定義屏幕大小和分辨率，以進行更深入的測試。您可以在側欄中找到預定義設備的屏幕尺寸/分辨率，例如Nexus平板電腦，Kindle或Google Pixel手機。即使在小屏幕上運行，也可以在此測試大屏幕尺寸。響應式設計檢查器目前支持大型24英寸屏幕。

4.GOOGLE MOBILE TEST

Google為網(wǎng)站管理員和網(wǎng)絡開發(fā)者提供了許多出色的工具，Google Mobile Test就是其中之一。此工具實際上不是預覽工具，也不能幫助您準確確定UI中的錯誤。但它是一種超實用的移動工具，可以在移動設備上快速定位網(wǎng)站中的問題。測試開始后，測試結果必須以失敗或成功結束。對于設計師來說，這個結果可能看起來很粗糙，但Google會識別需要改進的區(qū)域和元素，并提供改進的提示。該工具可能是一個完整的響應工具，但它是一個非常可靠的移動測試工具，是收集和組織信息的好地方。

5.MATT KERSLEY的響應工具

設計師和開發(fā)人員Matt Kersley發(fā)布了這個免費的響應式布局測試工具，這是一個簡單的測試工具之一。雖然裝飾不多，但該工具內(nèi)置5個固定寬度用于測試，240px，320px，480px，768px，1024px。預覽界面中有一個滾動條，您可以在其中瀏覽內(nèi)容，但無法單擊它，因此該工具非常適合測試單個頁面。

6.AM我有責任嗎？

當然，如果您需要在測試期間測試頁面像素，那么您不應該使用Am I Responsive工具。相反，如果您的測試需要快速測試頁面在幾個常見設備上的外觀，那么這是一個不錯的選擇。同樣是輸入鏈接生成預覽，Am I Responsive可以幫助您測試智能手機，平板電腦，筆記本電腦和桌面設備上的頁面瀏覽體驗。此工具的亮點在于它可以在屏幕截圖的同時生成相應設備的外觀，并匹配頁面的大小比例。

7.DESIGNMODO響應測試

名為Designmodo Responsive Test的工具是由著名設計博客Designmodo開發(fā)的工具。它免費且易于使用，可以測試特定寬度的網(wǎng)頁顯示。這個工具的最大優(yōu)點是基于網(wǎng)格的頁面設置。您可以使用此Web應用程序來測試網(wǎng)頁的像素和頁面中內(nèi)置的網(wǎng)格系統(tǒng)。除了使用預先制作的寬度進行測試外，您還可以拖動以調(diào)整寬度以進行預覽。