響應(yīng)式設(shè)計幾乎是當(dāng)代網(wǎng)頁設(shè)計的基本組成部分之一。在實際的設(shè)計和開發(fā)過程中，設(shè)計師和前端需要相當(dāng)多的時間來測試和優(yōu)化網(wǎng)站根據(jù)設(shè)計響應(yīng)不同尺寸的屏幕。因此，今天我們收集了7個強大的響應(yīng)頁面測試工具，這里將逐一介紹。

　　1.XRESPOND

　　這款名為XRespond該工具自稱虛擬設(shè)備實驗室，其實名副其實。

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

　　屏幕上方的標(biāo)簽將標(biāo)記為什么設(shè)備匹配。不同品牌、不同型號的智能手機、平板電腦和筆記本電腦屏幕可以在下拉框中選擇，以預(yù)測效果。

　　2.RESPONSINATOR

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

　　你可以在Responsinator常用的移動設(shè)備，如iPhone、iPad、Nexus該系列包括橫屏和豎屏的預(yù)覽。

　　Responsinator還支持http鏈接和https應(yīng)用程序?qū)⒏鶕?jù)您輸入的鏈接自動識別和適應(yīng)之間的切換，并避免SSL錯誤。

　　3.RESPONSIVEDESIGNCHECKER

　　快速檢測一個網(wǎng)站是否響應(yīng)并不難。ResponsiveDesignChecker這個工具可以幫助你定制屏幕尺寸和分辨率，進行更深入的測試。

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

　　這里也可以測試大屏幕尺寸，即使在小屏幕上運行這個工具也能達到效果。ResponsiveDesignChecker支持大24英寸屏幕。

　　4.GOOGLEMOBILETEST

　　Google它為網(wǎng)站管理員和網(wǎng)頁開發(fā)者提供了許多高質(zhì)量的工具GoogleMobileTest也是其中之一。

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

　　一旦測試開始，測試結(jié)果必須以失敗或成功結(jié)束。對于設(shè)計師來說，這個結(jié)果可能看起來很粗糙，但是Google識別需要改進的區(qū)域和元素，并提供改進提示。

　　這個工具可能有很多完整的響應(yīng)工具，但它是一個非?？煽康囊苿?strong>測試工具，是收集和整理信息的好地方。

　　5.MATTKERSLEY’SRESPONSIVETOOL

　　設(shè)計師和開發(fā)者MattKersley發(fā)布的免費響應(yīng)式布局測試工具是眾多測試工具中的簡單工具。

　　雖然裝飾不多，但該工具內(nèi)置了5個固定寬度進行測試，即240px，320px，480px，768px，1024px。

　　預(yù)覽界面中有滾動條，可以瀏覽內(nèi)容，但不能點擊內(nèi)容，所以這個工具非常適合測試單頁。

網(wǎng)站建設(shè)公司" />

　　6.AMIRESPONSIVE?

　　當(dāng)然，如果你在測試頁面時需要測試頁面像素，你最好不要使用它AmIResponsive這個工具。

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

　　輸入鏈接生成預(yù)覽，AmIResponsive在智能手機、平板電腦、筆記本電腦、筆記本電腦和桌面設(shè)備上測試頁面的瀏覽體驗。

　　該工具的亮點是，它可以在截圖的同時生成相應(yīng)設(shè)備的外觀，并匹配頁面的尺寸比。

　　7.DESIGNMODORESPONSIVETEST

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

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

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