9款免費(fèi)且超實(shí)用的響應(yīng)式網(wǎng)頁(yè)測(cè)試工具

當(dāng)前響應(yīng)式設(shè)計(jì)幾乎是現(xiàn)代網(wǎng)站的標(biāo)配，開(kāi)發(fā)者搭建好網(wǎng)站之后若是要測(cè)試其響應(yīng)式的變化效果，需要大量的測(cè)試設(shè)備來(lái)確保網(wǎng)頁(yè)顯示不會(huì)出問(wèn)題，可是拿大量的實(shí)際設(shè)備來(lái)測(cè)試并不現(xiàn)實(shí)。在這種需求之下，催生了許多實(shí)用而可靠的響應(yīng)式網(wǎng)站 測(cè)試工具，這些工具當(dāng)中絕大多數(shù)是免費(fèi)的，讓開(kāi)發(fā)者從海量的測(cè)試設(shè)備中解脫出來(lái)。今天，圖趣網(wǎng)從這些測(cè)試工具中，挑選出9款免費(fèi)又實(shí)用的測(cè)試工具，造福網(wǎng)頁(yè)設(shè)計(jì)師和開(kāi)發(fā)者。

1. Responsive Design Bookmarklet

這是一款簡(jiǎn)單又高效的測(cè)試工具，當(dāng)你需要測(cè)試某個(gè)網(wǎng)站的時(shí)候，只需要將待測(cè)試的網(wǎng)站書(shū)簽拖拽到瀏覽器當(dāng)中，通過(guò)一個(gè)虛擬鍵盤來(lái)設(shè)置長(zhǎng)寬比來(lái)進(jìn)行測(cè)試。一旦CSS文件被保存，被修改的部分會(huì)自動(dòng)實(shí)現(xiàn)。在這個(gè)過(guò)程中，瀏覽器并不需要一直開(kāi)著，簡(jiǎn)單，實(shí)用!

2. resizeMyBrowser

resizeMyBrowser 中預(yù)制了15種不同比例的瀏覽器參數(shù)，并且用戶可以自己設(shè)置特定的瀏覽器參數(shù)以便于測(cè)試。整個(gè)測(cè)試工具界面友好，也是最值得推薦的測(cè)試工具之一。

3. The Responsive Calculator

這款名為響應(yīng)式計(jì)算器的工具，最強(qiáng)大的地方就是可以幫你一鍵完成測(cè)試，真就這么簡(jiǎn)單。這個(gè)工具能夠?qū)⑾袼剞D(zhuǎn)化為百分比，它可以將你設(shè)計(jì)好的PSD文檔導(dǎo)入瀏覽器中，將比例和視覺(jué)效果調(diào)至完美。

4. Responsinator

顧名思義，這款名為Responsinator 的工具可以幫你測(cè)試網(wǎng)站針對(duì)不同屏幕不同平臺(tái)的響應(yīng)是否良好，其中內(nèi)置了iPhone、Andoird、iPad、Kindle、瀏覽器等不同平臺(tái)的參數(shù)以便測(cè)試。Responsinator 還貼心地內(nèi)置了橫屏和豎屏模式，測(cè)試的時(shí)候，只需要將URL粘貼進(jìn)去就可以開(kāi)始了。

5. Respondr

和其他幾款工具相似，粘貼URL，選擇設(shè)備就可以進(jìn)行測(cè)試網(wǎng)頁(yè)在不同設(shè)備上的展現(xiàn)效果了!幾個(gè)簡(jiǎn)單的步驟，就可以幫你搞定網(wǎng)頁(yè)響應(yīng)式測(cè)試。

6. Designmodo Responsive Test

Designmodo 不僅是著名的設(shè)計(jì)博客，也是設(shè)計(jì)素材和設(shè)計(jì)工具的分發(fā)平臺(tái)。為了幫助開(kāi)發(fā)者測(cè)試網(wǎng)頁(yè)在各個(gè)平臺(tái)上的體驗(yàn)和響應(yīng)效果，他們推出了這款Designmodo 響應(yīng)測(cè)試工具，其中內(nèi)置了主流平臺(tái)的參數(shù)，也允許用戶自己修改尺寸參數(shù)進(jìn)行測(cè)試。

7. responsivepx

你可有將responsivepx 稱為工具，可以稱之為接口，因?yàn)樗粌H可以幫助用戶檢測(cè)明確的斷點(diǎn)，還能幫用戶搞定CSS查詢的可用性，能針對(duì)網(wǎng)站或者APP定制尺寸，測(cè)試其響應(yīng)式的效果。

8. Screenfly

這款QuirkTools開(kāi)發(fā)的工具Screenfly可以幫網(wǎng)頁(yè)設(shè)計(jì) 師測(cè)試網(wǎng)頁(yè)在手機(jī)、平板、電視和傳統(tǒng)的桌面上的顯示效果和兼容性。Screenfly內(nèi)置選項(xiàng)不少，可根據(jù)需求進(jìn)行調(diào)整。

9. Viewport Resizer

這款響應(yīng)式測(cè)試工具可以輕松調(diào)整顯示尺寸和網(wǎng)頁(yè)中的內(nèi)容。將鏈接輸入測(cè)試工具，接下來(lái)，就讓它來(lái)搞定一切吧。

結(jié)語(yǔ)

我們希望這些測(cè)試工具能在接下來(lái)的開(kāi)發(fā)過(guò)程中能幫到你，讓你的設(shè)計(jì)完美的呈現(xiàn)在用戶面前。