響(xiang)應(ying)式設(she)計(ji)(ji)(ji)幾乎是(shi)當(dang)代網頁設(she)計(ji)(ji)(ji)的(de)(de)基(ji)礎構成之一。在實際設(she)計(ji)(ji)(ji)和開發的(de)(de)過(guo)程中，想(xiang)要讓網站按照(zhao)設(she)計(ji)(ji)(ji)響(xiang)應(ying)不同(tong)尺寸屏幕(mu)，設(she)計(ji)(ji)(ji)師和前端需要花費相當(dang)的(de)(de)時間來進行(xing)測試和優化(hua)。所以，今(jin)天我們搜集(ji)了(le)7款功能(neng)強(qiang)大的(de)(de)響(xiang)應(ying)式頁面(mian)測試工具，下(xia)面(mian)就一一介紹(shao)一下(xia)。
1.XRESPOND
這(zhe)款名(ming)為XRespond的工(gong)具自(zi)稱為“虛(xu)擬(ni)設(she)備實(shi)驗室”，這(zhe)個(ge)稱號其實(shi)是(shi)名(ming)副其實(shi)的。
通(tong)過Xrespond打開網頁(ye)，你(ni)可以(yi)看到它在不同(tong)屏幕尺(chi)寸下的樣子，整個布(bu)局是橫向(xiang)的，所(suo)以(yi)你(ni)需要橫向(xiang)滾動頁(ye)面才(cai)能看到它所(suo)有(you)的樣子。
屏幕上方的標(biao)簽會標(biao)識出它(ta)是為什么設備(bei)所匹配的，在(zai)下拉框當中(zhong)能夠(gou)選出不同品牌不同型號的智能手(shou)機、平板和筆(bi)記本屏幕，以(yi)預覽(lan)效果。
2.RESPONSINATOR
和(he)XRespond的(de)功能相似(si)，Responsinator也提供了不同(tong)屏幕尺(chi)寸下的(de)預覽效(xiao)果。不過，Responsinator的(de)布局和(he)前者不同(tong)，縱向(xiang)滾動(dong)更符合日常(chang)的(de)交互邏輯。
你可以在Responsinator中看(kan)到最常用的移(yi)動端設(she)備，比(bi)如iPhone、iPad、Nexus系列，包含(han)橫(heng)屏和豎(shu)屏的預覽。
Responsinator還支(zhi)持http鏈(lian)接和https之間的切換，應用(yong)會根(gen)據你輸入的鏈(lian)接自動識別和適配，并且會避免SSL錯誤。
3.RESPONSIVE DESIGN CHECKER
想要快速檢測(ce)一個網站(zhan)是否是響應式的并不難(nan)，使用Responsive Design Checker來檢測(ce)就好(hao)了，這款工具能(neng)夠(gou)非常便捷地幫你自定義屏(ping)幕尺寸和分(fen)辨率，來進(jin)行更深入的測(ce)試。
你可以在邊(bian)欄中，找到(dao)預定義(yi)的設備(bei)的屏幕(mu)尺寸(cun)/分辨率，比(bi)如Nexus平板電腦(nao)，Kindle或者Google Pixel手(shou)機。
在這里同(tong)樣(yang)可(ke)以(yi)對大屏(ping)尺寸進行測試，即(ji)使是在小屏(ping)幕(mu)上運行這一工具也同(tong)樣(yang)可(ke)以(yi)達到效果。目前Responsive Design Checker支持最(zui)大24英(ying)寸的屏(ping)幕(mu)。
4.GOOGLE MOBILE TEST
Google為網站管(guan)理員和網頁開(kai)發者提供了不少(shao)優質的工(gong)具，而Google Mobile Test也(ye)是(shi)其中之一(yi)。
這款工(gong)具不是真正意義上(shang)的預覽工(gong)具，也不能(neng)幫(bang)你(ni)(ni)精確地(di)判斷UI中的錯(cuo)誤(wu)。但(dan)是它是一款超(chao)級實用(yong)的移動端工(gong)具，它能(neng)幫(bang)你(ni)(ni)在移動設備上(shang)快速(su)定位網(wang)站中的問題。
一(yi)旦開始運行測試，測試結(jie)(jie)(jie)果(guo)一(yi)定是(shi)以失敗(bai)或者成功(gong)來結(jie)(jie)(jie)束(shu)的(de)。對(dui)于設計師而言，這個結(jie)(jie)(jie)果(guo)可能看起(qi)來比較粗糙，但是(shi)Google會針(zhen)對(dui)需要改進(jin)的(de)區域和元素進(jin)行標(biao)識，并且提(ti)供改進(jin)的(de)提(ti)示(shi)。
這個工(gong)(gong)具(ju)也許不少(shao)一個完整的(de)響應式工(gong)(gong)具(ju)，但是(shi)它(ta)是(shi)非常(chang)可(ke)靠(kao)的(de)移動端測試工(gong)(gong)具(ju)，并且是(shi)用(yong)來(lai)搜(sou)集和整理信息的(de)好地方。
5.MATT KERSLEY’S RESPONSIVE TOOL
設(she)計(ji)師兼開發者(zhe)Matt Kersley發布的這款免費的響應式(shi)布局測(ce)試(shi)工具(ju)，是諸(zhu)多測(ce)試(shi)工具(ju)中最樸素的一款。
雖(sui)然沒(mei)有太多裝飾(shi)，但是(shi)這款工具(ju)內置(zhi)了5種固定(ding)的寬度用來測(ce)試，分別是(shi)240px，320px，480px，768px，1024px。
預覽(lan)界面中(zhong)有滾動條，可以(yi)借此來瀏覽(lan)其(qi)中(zhong)內容，但是你不能點擊其(qi)中(zhong)的內容，所以(yi)這款(kuan)工(gong)具(ju)極其(qi)適合(he)測試(shi)單個頁面。
6.AM I RESPONSIVE?
當(dang)然，如果你測(ce)試(shi)頁(ye)面的時候，需(xu)要測(ce)試(shi)過程中(zhong)頁(ye)面像素完美的話，那么你還是不要用(yong)Am I Responsive這款工(gong)具(ju)了。
相反(fan)，如果你的測試需要快速測試頁面在幾款常見設備上(shang)的顯示效果的話(hua)，倒是(shi)個不錯的選擇(ze)。
同樣(yang)是輸入鏈(lian)接生成預覽，Am I Responsive能幫(bang)你測試出頁面在智(zhi)能手機、平板電腦、筆記本電腦和桌面端設備上的瀏覽體驗。
這款(kuan)工具的亮(liang)點在于，它能在截圖的同時，生(sheng)成對應設(she)備的外觀，和頁面的尺寸比例進行匹(pi)配。
7.DESIGNMODO RESPONSIVE TEST
這(zhe)款名為Designmodo Responsive Test的(de)(de)工具(ju)是著名的(de)(de)設計博客Designmodo所(suo)推的(de)(de)工具(ju)，免費，易用，可(ke)以針(zhen)對(dui)特定的(de)(de)寬度來(lai)測試(shi)網頁的(de)(de)顯示效(xiao)果。
這款(kuan)工具最大的優(you)點是其(qi)中基于網(wang)(wang)格的頁(ye)面設置(zhi)。你可以使用(yong)這款(kuan)網(wang)(wang)頁(ye)應用(yong)來測(ce)試網(wang)(wang)頁(ye)的像素點和(he)頁(ye)面內置(zhi)的柵格系統。
除(chu)了使用預(yu)制的寬度來(lai)測試，你還可以自己拖動來(lai)調整寬度進(jin)行預(yu)覽。 
