有些人喜歡設計 “移動優先”，其他人則同時設計，而另一些人則首先設計桌上型電腦，然後針對較小的螢幕進行調整。無論您的過程如何，都需要使用正確的工具來檢查網站的響應速度。
這就是為什麼我們將此列表與一些 zui 實用的響應式網站設計測試工具和網站放在一起的原因。試試看，看看 zui 適合哪一個。
1 、 Chrome 上的除錯工具 (F12)
列表中第一個響應式測試工具就在您的 Chrome 瀏覽器中。您用來檢查站點程式碼的同一工具還具有測試螢幕尺寸和視口的功能。右鍵單擊任何網站，然後單擊 “檢查” 。檢查視窗開啟後，您將在名為 “元素” 的按鈕旁邊看到裝置圖示。當您單擊裝置按鈕時，螢幕將顯示您在不同斷點處的網站。
您可以輸入特定的大小，也可以簡單地抓住並拖動視窗的一角來手動更改斷點。這對於檢查您的設計如何適應不同的視口非常有用。
2 、響應式測試工具
響應式測試工具就像大多數響應式測試網站一樣，您可以在螢幕頂部的搜尋欄中輸入要測試的頁面的 URL 。此特定工具有很長的預設裝置大小列表供您選擇。如果需要其他尺寸，可以選擇自定義尺寸尺寸。當您要檢查設計中的更改時，只需單擊 “檢查” 按鈕即可重新載入。在測試視窗中有一個用於切換滾動功能的按鈕，以及一個用於檢查垂直和水平佈局的 “旋轉” 按鈕。
該工具背後的開發人員還為響應式網站建立了一個網格系統。您會在右上角的燈泡圖示中找到它。
3 、應式設計檢查器
響應式設計檢查器是一個具有許多預設螢幕尺寸和自定義尺寸選項的站點。與上面的工具相比，該工具缺少的是螢幕頂部的標尺和旋轉按鈕。共同之處在於，“開始” 按鈕的工作方式相同，當您對設計進行了更改並想要檢查結果時，只需單擊它即可。
4 、設計模式
Design Modo 是一個網站和電子郵件構建器，其網站包含免費的響應式測試工具。該工具具有上述兩個工具所具有的所有功能以及一個拖動按鈕，以檢視設計在視口收縮和擴充套件時如何變化。當然，它也可以作為其主要服務的廣告和潛在客戶生成裝置。唯一的挫折是該工具顯示的測量值是按解析度而不是視口顯示的。這可能會造成一些混亂。
5 、螢幕飛
Screenfly 是另一個具有與上述示例相同的響應測試功能的網站，但是預設有些過時。 iPhone 的 zui 後一個預設是 7X 。儘管如此，該工具仍然可以正常工作，並具有自定義尺寸功能，旋轉和重新整理按鈕以及滾動切換。
6 、響應者
Responsinator 仍然是 zui 受歡迎的響應式 Web 設計測試應用程式之一，可能是因為它看起來很酷。新增 URL 時，它會在許多不同的移動裝置中以垂直和水平佈局顯示網站。此工具可用於在 zui 常見的裝置中進行快速檢查，但是如果要檢查所有斷點，則此工具受到限制。
7 、我反應靈敏嗎
我是否響應式與響應器相似，因為它在一定數量的裝置中顯示測試站點。該工具的好處是您可以截圖結果並將其用於投資組合。而且，每個螢幕都可以獨立滾動。
8 、畫素調諧器
Pixeltuner 是一個類似於 Responsinator 的網站。該工具僅顯示 6 種螢幕尺寸，但它們是不錯的選擇。有了這六個尺寸，您可以確定已經覆蓋了所有基礎。唯一缺少的是 1500 畫素以上的大螢幕尺寸。
9 、響應式網頁設計測試儀
響應式 Web 設計測試器不是網站，而是瀏覽器擴充套件。您可以在瀏覽器的擴充套件程式或附加庫中找到它。以下連結適用於 Chrome 擴充套件程式，但該工具也適用於 Safari 和 Firefox 。當您點選擴充套件圖示時，您可以從一系列預設中進行選擇，然後該站點將以您選擇的視口大小在新視窗中開啟。預設有些過時，但是您可以新增新裝置並建立自己的首選組。