響應式設計幾乎是當代網(wǎng)頁(yè)設計的基礎構成之一。在實(shí)際設計和開(kāi)發(fā)的過(guò)程中，想要讓網(wǎng)站按照設計響應不同尺寸屏幕，設計師和前端需要花費相當的時(shí)間來(lái)進(jìn)行測試和優(yōu)化。所以，今天我們搜集了7款功能強大的響應式頁(yè)面測試工具，下面就一一介紹一下。

　　1.XRESPOND

　　這款名為XRespond的工具自稱(chēng)為“虛擬設備實(shí)驗室”，這個(gè)稱(chēng)號其實(shí)是名副其實(shí)的。

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

　　屏幕上方的標簽會(huì )標識出它是為什么設備所匹配的，在下拉框當中能夠選出不同品牌不同型號的智能手機、平板和筆記本屏幕，以預覽效果。

　　2.RESPONSINATOR

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

　　你可以在Responsinator中看到常用的移動(dòng)端設備，比如iPhone、iPad、Nexus系列，包含橫屏和豎屏的預覽。

　　Responsinator還支持http鏈接和https之間的切換，應用會(huì )根據你輸入的鏈接自動(dòng)識別和適配，并且會(huì )避免SSL錯誤。

　　3.RESPONSIVE DESIGN CHECKER

　　想要快速檢測一個(gè)網(wǎng)站是否是響應式的并不難，使用Responsive Design Checker來(lái)檢測就好了，這款工具能夠非常便捷地幫你自定義屏幕尺寸和分辨率，來(lái)進(jìn)行更深入的測試。

　　你可以在邊欄中，找到預定義的設備的屏幕尺寸/分辨率，比如Nexus平板電腦，Kindle或者Google Pixel手機。

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

　　4.GOOGLE MOBILE TEST

　　Google為網(wǎng)站管理員和網(wǎng)頁(yè)開(kāi)發(fā)者提供了不少優(yōu)質(zhì)的工具，而Google Mobile Test也是其中之一。

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

　　一旦開(kāi)始運行測試，測試結果一定是以失敗或者成功來(lái)結束的。對于設計師而言，這個(gè)結果可能看起來(lái)比較粗糙，但是Google會(huì )針對需要改進(jìn)的區域和元素進(jìn)行標識，并且提供改進(jìn)的提示。

　　這個(gè)工具也許不少一個(gè)完整的響應式工具，但是它是非常可靠的移動(dòng)端測試工具，并且是用來(lái)搜集和整理信息的好地方。

　　5.MATT KERSLEY’S RESPONSIVE TOOL

　　設計師兼開(kāi)發(fā)者M(jìn)att Kersley發(fā)布的這款免費的響應式布局測試工具，是諸多測試工具中樸素的一款。

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

　　預覽界面中有滾動(dòng)條，可以借此來(lái)瀏覽其中內容，但是你不能點(diǎn)擊其中的內容，所以這款工具極其適合測試單個(gè)頁(yè)面。

　　6.AM I RESPONSIVE?

　　當然，如果你測試頁(yè)面的時(shí)候，需要測試過(guò)程中頁(yè)面像素的話(huà)，那么你還是不要用Am I Responsive這款工具了。

　　相反，如果你的測試需要快速測試頁(yè)面在幾款常見(jiàn)設備上的顯示效果的話(huà)，倒是個(gè)不錯的選擇。

　　同樣是輸入鏈接生成預覽，Am I Responsive能幫你測試出頁(yè)面在智能手機、平板電腦、筆記本電腦和桌面端設備上的瀏覽體驗。

　　這款工具的亮點(diǎn)在于，它能在截圖的同時(shí)，生成對應設備的外觀(guān)，和頁(yè)面的尺寸比例進(jìn)行匹配。

　　7.DESIGNMODO RESPONSIVE TEST

　　這款名為Designmodo Responsive Test的工具是著(zhù)名的設計博客Designmodo所推的工具，免費，易用，可以針對特定的寬度來(lái)測試網(wǎng)頁(yè)的顯示效果。

　　這款工具大的優(yōu)點(diǎn)是其中基于網(wǎng)格的頁(yè)面設置。你可以使用這款網(wǎng)頁(yè)應用來(lái)測試網(wǎng)頁(yè)的像素點(diǎn)和頁(yè)面內置的柵格系統。

　　除了使用預制的寬度來(lái)測試，你還可以自己拖動(dòng)來(lái)調整寬度進(jìn)行預覽。

http://ezekroy.com/jianzhanzhishi/6684.html 響應式網(wǎng)頁(yè)測試工具確保你的設計萬(wàn)無(wú)一失-深圳網(wǎng)站制作