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

1.XRESPOND

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

2.RESPONSINATOR

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

3.響應(yīng)設(shè)計(jì)檢查員

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

4.GOOGLE MOBILE TEST

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

5.MATT KERSLEY的響應(yīng)工具

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

6.AM我有責(zé)任嗎？

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

7.DESIGNMODO響應(yīng)測(cè)試

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