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

　　1.XRESPOND

　　這款名為XRespond該工具自稱(chēng)虛擬設(shè)備實(shí)驗(yàn)室，其實(shí)名副其實(shí)。

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

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

　　2.RESPONSINATOR

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

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

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

　　3.RESPONSIVEDESIGNCHECKER

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

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

　　這里也可以測(cè)試大屏幕尺寸，即使在小屏幕上運(yùn)行這個(gè)工具也能達(dá)到效果。ResponsiveDesignChecker支持大24英寸屏幕。

　　4.GOOGLEMOBILETEST

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

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

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

　　這個(gè)工具可能有很多完整的響應(yīng)工具，但它是一個(gè)非常可靠的移動(dòng)測(cè)試工具，是收集和整理信息的好地方。

　　5.MATTKERSLEY’SRESPONSIVETOOL

　　設(shè)計(jì)師和開(kāi)發(fā)者M(jìn)attKersley發(fā)布的免費(fèi)響應(yīng)式布局測(cè)試工具是眾多測(cè)試工具中的簡(jiǎn)單工具。

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

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

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

　　6.AMIRESPONSIVE?

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

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

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

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

　　7.DESIGNMODORESPONSIVETEST

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

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

　　除了使用預(yù)制寬度進(jìn)行測(cè)試外，還可以自行拖動(dòng)來(lái)調(diào)整預(yù)覽寬度。