最佳的 14 個免費的響應式 Web 設計測試工具

一旦你決定要搭建一個網站就應該已經制定了設計標準。你認爲下一步該作什麼呢？測試！我使用「測試」這個詞來檢測你網站對不一樣屏幕和瀏覽器尺寸的響應狀況。測試在響應式網頁設計的過程當中是很重要的一步。若是你明白我所說的那你須要讓你的網站在任何類型的設備上均可以正常顯示。

　　在當今世界，技術進步和工具所帶來的用戶不單單侷限在使用網絡的筆記本電腦或臺式機上。這得益於電信公司提供的火光通常的數據速度。這使得設計人員要確保網站可以在各類設備上良好工做。

　　幸運的是，這不是一個大問題。如今已經有許多不錯的在線免費響應式網頁設計測試工具，它們能幫助你檢查你的網站設計是否可以用戶友好地響應各類設備。網站應該是用戶友好的且可以響應各類可用的設備。建立一個智能、靈活、符合常規web體驗的響應式/多設備兼容的網站設計必定會取得成功。

　　下面列出的是一些很好的工具和資源，它們可以幫助你設計出可以適應不一樣尺寸和操做系統設備的網站。使用下面列出的工具和資源來測試響應式站點咱們不須要掌握編碼知識。

　　最佳的免費的響應式Web設計測試工具

　　1. 響應式設計書籤

　　響應式設計書籤是響應式設計測試的一個方便的工具。你只須要拖拽書籤欄上的書籤，它就會應用於你的瀏覽器。它是如何工做的呢：首先，觸發出一個虛擬鍵盤檢測一下用戶在輸入數據時有多大的空間能夠。之後觸動CSS刷新。

　　當你保存一個CSS文件時，變動便直接生效了，不須要刷新你工做的瀏覽器。最後，關閉書籤並返回到當前頁面。這可讓你以適合平板電腦或智能手機屏幕寬度的尺寸預覽當前頁面。

　　2. jResize插件

　　jResize是一個響應的Web開發工具，集成在jQuery中用來協助響應式開發項目。框架以不一樣的寬度被嵌入到網頁中。因此，很容易在瀏覽器中調整你的HTML。你所須要作的就是下載這個很酷的工具，當你點擊你想要的寬度時尺寸便隨之更改。

　　3. resizeMyBrowser

　　resizeMyBrowser是一個響應式網頁設計工具，容許你選擇須要測試的瀏覽器尺寸。用戶能夠在15種不一樣的預設尺寸中選擇或輸入自定義的尺寸。

　　4. Screenqueri.es

　　Screenqueri.es是一個完美的像素級響應式設計測試工具，它可讓你在30種不一樣的設備或自定義分辨率的窗口中測試你的設計。

　　5. 響應計算器

　　響應計算器是一個便於設計人員在給定狀況下將像素轉化爲百分百的工具。它能夠幫助你將PSD像素完美契合到你的網站中去。只需簡單地按需求點擊便可。

　　6. Screenfly

　　QuirkTools的Screenfly是一個在線的數字設備模擬工具，它可讓用戶在不一樣的設備中預覽他們的響應式網站，如臺式機、平板電腦、手機或電視。它很容易使用，正如以前提到的給了你各類各樣的選擇，像可視型的不一樣大小的臺式電腦顯示器和電視屏幕的虛擬。另外它還有用來啓用或禁用滾動或旋轉顯示的選項。

　　7. Responsinator

　　Responsinator是個很酷的工具，一個在線的網站，它可讓你以肖像和風景模式在智能手機和平板電腦上預覽你的網頁。此外，Responsinator可以給你在不一樣屏幕上瀏覽你網站的真是體驗。只要輸入URL和就能夠在iPhone、ipad、Kindle和其餘Android手機上預覽。

　　8. Viewport Resizer

　　Viewport resizer是一個基於瀏覽器的工具，它可讓用戶測試任何網站的響應特性。用戶只須要保存的書籤，訪問他們想測試頁面，點擊建立的書籤並檢查該頁面在全部類型屏幕分辨率上的表現。

　　9. Respondr

　　這是一個簡單且有用的工具，它要求你輸入你想測試的站點或頁面的URL，而後選擇你想要測試的設備。

　　10. ReView.Js

　　由Edward Cant開發，ReView是一個動態的視窗系統，它提供了一個有效的響應式網頁的視圖選擇。用戶能夠選擇從'進入'和'退出'響應式設計狀態。

　　11. Designmodo Responsive Test

　　Designmodo Responsive Test正如名字所暗示的，這是一個響應式網站測試工具，能夠幫助你在大量的屏幕尺寸中測試網站測試。只需鍵入URL選擇設備類型或輸入自定義尺寸。下圖顯示了咱們網站的響應測試。

　　12. Adobe Edge Inspect

　　Adobe Edge Inspect CC可讓你在各類設備中預覽檢查你的網頁設計。它有同步瀏覽遠程檢查、截圖、邊緣檢測，可擴展等許多特性。

　　13. responsivepx

　　它是一個很酷的在線門戶網站或工具，你能夠用它來測試你的響應式網站設計。它可讓你按像素調整網站。這個特性可讓你設置斷點並可以測試CSS媒體是如何在你站點上工做的。

　　14. DimensionsApp

　　DimensionsApp是一個手機和平板電腦的在線仿真器，它能夠幫助你在諸如平板電腦、寬屏幕設備、手機等許多設備中測試你網站的響應性。只須要輸入你博客的URL並點擊各類設備的名稱就能夠看到它呈現出的樣子。

　　除上述列出的工具以外，你有沒有心儀的免費的響應式網頁設計工具？若是有，趕快拿出來分享吧。

　　原文地址：http://thedesignblitz.com/free-responsive-web-design-testing-tools/