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

oschina發表於2013-11-03

　　一旦你決定要搭建一個網站就應該已經制定了設計標準。你認為下一步該做什麼呢？測試！我使用“測試”這個詞來檢測你網站對不同螢幕和瀏覽器尺寸的響應情況。測試在響應式網頁設計的過程中是很重要的一步。如果你明白我所說的那你需要讓你的網站在任何型別的裝置上都可以正常顯示。

　　在當今世界，技術進步和工具所帶來的使用者不僅僅侷限在使用網路的膝上型電腦或桌上型電腦上。這得益於電信公司提供的火光一般的資料速度。這使得設計人員要確保網站能夠在各種裝置上良好工作。

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

best-free-responsive-web-design-testing-tools

　　下面列出的是一些很好的工具和資源，它們能夠幫助你設計出能夠適應不同尺寸和作業系統裝置的網站。使用下面列出的工具和資源來測試響應式站點我們不需要掌握編碼知識。

　　最佳的免費的響應式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是一個線上的數字裝置模擬工具，它可以讓使用者在不同的裝置中預覽他們的響應式網站，如桌上型電腦、平板電腦、手機或電視。它很容易使用，正如之前提到的給了你各種各樣的選擇，像可視型的不同大小的臺式電腦顯示器和電視螢幕的虛擬。另外它還有用來啟用或禁用滾動或旋轉顯示的選項。