我在給客戶做網站的過程中，不少客戶都會要求做響應式設計，響應式的網站也越來越多。但是響應式的網站在具體操作過程中，會有很多問題被忽略，所以我一般會使用一些響應式設計工具來測試這些站點是否正常顯示。
上次給大家分享過我的個人收藏夾的一些工具，今天跟大家再分享我個人覺得好用的五款響應式網頁測試工具，重點都是免費免費！
Responsive Design Checker
這個網站適合自定義屏幕尺寸的響應式設計檢查工具。直接在搜索欄輸入你要查詢的站點URL，側邊欄有很多尺寸高度可用於檢測，也可以在頂部自定義屏幕尺寸來進行站點檢測。
在側邊欄中，您可以找到大量預定義的屏幕尺寸，例如Nexus平板電腦，Kindles等甚至像Google Pixel這樣的新手機。
該網站還支持大屏幕尺寸，桌面顯示器 達24“寬。令人驚訝的是，即使在小型顯示器上，這些大尺寸也能很好地工作，因為預覽窗格根據比例而不是總像素寬度進行調整。
因此，如果您在較小的MacBook屏幕上測試1920px的顯示器，此工具非常值得收藏。
Responsinator
這個測試工具很酷，HTTP和HTTPS站點的切換比較自如，它會提供給設計師兩者類型的預覽網站效果，這個跟HTTP和HTTPS相關。它會自動匹配您預覽的任何網站，以避免SSL錯誤。
這個網站工具直接給你按照每個設備大小的屏幕給你展示測試站點的響應式效果，你可以直接在各個像素大小的設備上去預覽所做的網站效果。
可查看的設備包括最常見的iPhone和Android Nexus設備，包括縱向和橫向預覽。您還可以在縱向和橫向找到iPad設備預覽。總的來說比較全面的。
Designmodo Responsive Test
這個工具是我個人比較喜歡的，也是個免費的測試工具。這個工具有個特點就是你可以隨意的拖動預覽窗口的大小，以測試各個平面尺寸下的實際效果。它也支持手動輸入尺寸來預覽實際的效果。
同時，右上角的每個設備圖標可以讓您從數十種常用屏幕尺寸中進行選擇，從而使此工具非常適合檢查您可以想象的任何設備。
Matt Kersley’s Responsive Tool
這個免費的測試工具， 主要用於響應式布局。界面比較簡單，也沒有過多裝飾，但真的是好用。
這個工具設定了5個固定寬度供預覽：240像素，320像素，480像素，768像素，1024像素。
每個尺寸下的預覽窗口都有各個像素設備下的滾動條，可以輕松移動內容。但這個有個缺點吧，就是無法單擊任何鏈接或瀏覽窗格中的其他頁面，因此這最適用於測試單個頁面。
因為使用比較簡單，可操作性也比較高，所以還是值得推薦的。
XRESPOND
這個工具的實用性極高，通過這個站點，輸入要測試的官網連接，便可以預覽到各個設備上的網站效果。但是這個需要橫向去拉滾動條才能看到后面一些大尺寸的屏幕格式。
每個屏幕上方的標簽會告訴您確切的大小和與之匹配的設備。也可以從下拉菜單中還可以選擇各種智能手機，平板電腦和筆記本電腦來測試特定的設備。
除此，還可以單獨修改自定義寬度/高度的設置，來查看網站在特定尺寸顯示器上的顯示方式。
推薦這五款工具是因為操作起來比較簡單，最重要的是他們支持多設備尺寸，因此我們在具體使用過程中可以清晰的看到布局在各個屏幕設備下的不同效果。相信每位設計師在具體操作過程中多多少少都會遇到一些問題，不少網友問我用什么工具建站，怎么學習的代碼，所以后面這部分簡單分享下。
蟬知建站系統
我個人是蟬知的死忠粉，在用這個建站系統之前，我用的是worpress。蟬知相比較wordpress來說，比較符合國人使用的習慣，功能一樣強大，在安全和擴展方面也都還不錯，所以后來就一直使用蟬知至今。知名度可能不高，不過這是我個人的首推，推薦值得一試。
W3school
在 w3school，你可以找到你所需要的所有的網站建設教程。我之前從零開始學代碼，就是從這個站點開始的。從基礎的 HTML 到 CSS，乃至進階的XML、SQL、JS、PHP 和 ASP.NET。都適合新手學習。
Code pen
這個站點是我后來才慢慢接觸到的，站點現有上百個精選效果，上千個各類前端demo效果。優秀前端demo的展示。進入首頁就可以看到很多精湛的前端demo效果，相信很多人都可以從中獲得很多前端交互的靈感，當然，其中的技術實現也可以一並學習！
以上這些內容就是本次的分享，希望對大家的學習有所幫助，工具不在數量多，但一定要多用，希望這些工具都能給到大家的實質性的幫助，而不是變成收藏夾里的一個條目。
