最佳的14個(gè)免費(fèi)的響應(yīng)式Web設(shè)計(jì)測(cè)試工具
一旦你決定要搭建一個(gè)網(wǎng)站就應(yīng)該已經(jīng)制定了設(shè)計(jì)標(biāo)準(zhǔn)。你認(rèn)為下一步該做什么呢？測(cè)試！我使用“測(cè)試”這個(gè)詞來(lái)檢測(cè)你網(wǎng)站對(duì)不同屏幕和瀏覽器尺寸的響應(yīng)情 況。測(cè)試在響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的過(guò)程中是很重要的一步。如果你明白我所說(shuō)的那你需要讓你的網(wǎng)站在任何類(lèi)型的設(shè)備上都可以正常顯示。
在當(dāng)今世界，技術(shù)進(jìn)步和工具所帶來(lái)的用戶(hù)不僅僅局限在使用網(wǎng)絡(luò)的筆記本電腦或臺(tái)式機(jī)上。這得益于電信公司提供的火光一般的數(shù)據(jù)速度。這使得設(shè)計(jì)人員要確保網(wǎng)站能夠在各種設(shè)備上良好工作。
幸運(yùn)的是，這不是一個(gè)大問(wèn)題?，F(xiàn)在已經(jīng)有許多不錯(cuò)的在線免費(fèi)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)測(cè)試工具，它們能幫助你檢查你的網(wǎng)站設(shè)計(jì)是否能夠用戶(hù)友好地響應(yīng)各種設(shè)備。網(wǎng)站 應(yīng)該是用戶(hù)友好的且能夠響應(yīng)各種可用的設(shè)備。創(chuàng)建一個(gè)智能、靈活、符合常規(guī)web體驗(yàn)的響應(yīng)式/多設(shè)備兼容的網(wǎng)站設(shè)計(jì)一定會(huì)取得成功。
幸運(yùn)的是，這不是一個(gè)大問(wèn)題?，F(xiàn)在已經(jīng)有許多不錯(cuò)的在線免費(fèi)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)測(cè)試工具，它們能幫助你檢查你的網(wǎng)站設(shè)計(jì)是否能夠用戶(hù)友好地響應(yīng)各種設(shè)備。網(wǎng)站 應(yīng)該是用戶(hù)友好的且能夠響應(yīng)各種可用的設(shè)備。創(chuàng)建一個(gè)智能、靈活、符合常規(guī)web體驗(yàn)的響應(yīng)式/多設(shè)備兼容的網(wǎng)站設(shè)計(jì)一定會(huì)取得成功。
下面列出的是一些很好的工具和資源，它們能夠幫助你設(shè)計(jì)出能夠適應(yīng)不同尺寸和操作系統(tǒng)設(shè)備的網(wǎng)站。使用下面列出的工具和資源來(lái)測(cè)試響應(yīng)式站點(diǎn)我們不需要掌握編碼知識(shí)。
最佳的免費(fèi)的響應(yīng)式Web設(shè)計(jì)測(cè)試工具
1. 響應(yīng)式設(shè)計(jì)書(shū)簽
響應(yīng)式設(shè)計(jì)書(shū)簽是響應(yīng)式設(shè)計(jì)測(cè)試的一個(gè)方便的工具。你只需要拖拽書(shū)簽欄上的書(shū)簽，它就會(huì)應(yīng)用于你的瀏覽器。它是如何工作的呢：首先，觸發(fā)出一個(gè)虛擬鍵盤(pán)檢測(cè)一下用戶(hù)在輸入數(shù)據(jù)時(shí)有多大的空間可以。以后觸動(dòng)CSS刷新。
當(dāng)你保存一個(gè)CSS文件時(shí)，變更便直接生效了，不需要刷新你工作的瀏覽器。最后，關(guān)閉書(shū)簽并返回到當(dāng)前頁(yè)面。這可以讓你以適合平板電腦或智能手機(jī)屏幕寬度的尺寸預(yù)覽當(dāng)前頁(yè)面。
2. jResize插件
jResize是一個(gè)響應(yīng)的Web開(kāi)發(fā)工具，集成在jQuery中用來(lái)協(xié)助響應(yīng)式開(kāi)發(fā)項(xiàng)目。框架以不同的寬度被嵌入到網(wǎng)頁(yè)中。所以，很容易在瀏覽器中調(diào)整你的HTML。你所需要做的就是下載這個(gè)很酷的工具，當(dāng)你點(diǎn)擊你想要的寬度時(shí)尺寸便隨之更改。
resizeMyBrowser是一個(gè)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)工具，允許你選擇需要測(cè)試的瀏覽器尺寸。用戶(hù)可以在15種不同的預(yù)設(shè)尺寸中選擇或輸入自定義的尺寸。
Screenqueri.es是一個(gè)完美的像素級(jí)響應(yīng)式設(shè)計(jì)測(cè)試工具，它可以讓你在30種不同的設(shè)備或自定義分辨率的窗口中測(cè)試你的設(shè)計(jì)。
響應(yīng)計(jì)算器是一個(gè)便于設(shè)計(jì)人員在給定情況下將像素轉(zhuǎn)化為百分百的工具。它可以幫助你將PSD像素完美契合到你的網(wǎng)站中去。只需簡(jiǎn)單地按需求點(diǎn)擊即可。
6. Screenfly
QuirkTools的Screenfly是一個(gè)在線的數(shù)字設(shè)備模擬工具，它可以讓用戶(hù)在不同的設(shè)備中預(yù)覽他們的響應(yīng)式網(wǎng)站，如臺(tái)式機(jī)、平板電腦、手機(jī)或 電視。它很容易使用，正如之前提到的給了你各種各樣的選擇，像可視型的不同大小的臺(tái)式電腦顯示器和電視屏幕的虛擬。另外它還有用來(lái)啟用或禁用滾動(dòng)或旋轉(zhuǎn)顯 示的選項(xiàng)。
Responsinator是個(gè)很酷的工具，一個(gè)在線的網(wǎng)站，它可以讓你以肖像和風(fēng)景模式在智能手機(jī)和平板電腦上預(yù)覽你的網(wǎng)頁(yè)。此 外，Responsinator能夠給你在不同屏幕上瀏覽你網(wǎng)站的真是體驗(yàn)。只要輸入U(xiǎn)RL和就可以在iPhone、ipad、Kindle和其他 Android手機(jī)上預(yù)覽。
Viewport resizer是一個(gè)基于瀏覽器的工具，它可以讓用戶(hù)測(cè)試任何網(wǎng)站的響應(yīng)特性。用戶(hù)只需要保存的書(shū)簽，訪問(wèn)他們想測(cè)試頁(yè)面，點(diǎn)擊創(chuàng)建的書(shū)簽并檢查該頁(yè)面在所有類(lèi)型屏幕分辨率上的表現(xiàn)。
9. Respondr
這是一個(gè)簡(jiǎn)單且有用的工具，它要求你輸入你想測(cè)試的站點(diǎn)或頁(yè)面的URL，然后選擇你想要測(cè)試的設(shè)備。
10. ReView.Js
由Edward Cant開(kāi)發(fā)，ReView是一個(gè)動(dòng)態(tài)的視窗系統(tǒng)，它提供了一個(gè)有效的響應(yīng)式網(wǎng)頁(yè)的視圖選擇。用戶(hù)可以選擇從'進(jìn)入'和'退出'響應(yīng)式設(shè)計(jì)狀態(tài)。
11. Designmodo Responsive Test
Designmodo Responsive Test正如名字所暗示的，這是一個(gè)響應(yīng)式網(wǎng)站測(cè)試工具，可以幫助你在大量的屏幕尺寸中測(cè)試網(wǎng)站測(cè)試。只需鍵入U(xiǎn)RL選擇設(shè)備類(lèi)型或輸入自定義尺寸。下圖顯示了我們網(wǎng)站的響應(yīng)測(cè)試。
Adobe Edge Inspect CC可以讓你在各種設(shè)備中預(yù)覽檢查你的網(wǎng)頁(yè)設(shè)計(jì)。它有同步瀏覽遠(yuǎn)程檢查、截圖、邊緣檢測(cè)，可擴(kuò)展等許多特性。
13. responsivepx
它是一個(gè)很酷的在線門(mén)戶(hù)網(wǎng)站或工具，你可以用它來(lái)測(cè)試你的響應(yīng)式網(wǎng)站設(shè)計(jì)。它可以讓你按像素調(diào)整網(wǎng)站。這個(gè)特性可以讓你設(shè)置斷點(diǎn)并能夠測(cè)試CSS媒體是如何在你站點(diǎn)上工作的。
14. DimensionsApp
DimensionsApp是一個(gè)手機(jī)和平板電腦的在線仿真器，它可以幫助你在諸如平板電腦、寬屏幕設(shè)備、手機(jī)等許多設(shè)備中測(cè)試你網(wǎng)站的響應(yīng)性。只需要輸入你博客的URL并點(diǎn)擊各種設(shè)備的名稱(chēng)就可以看到它呈現(xiàn)出的樣子。
除上述列出的工具之外，你有沒(méi)有心儀的免費(fèi)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)工具？如果有，趕快拿出來(lái)分享吧。
原文鏈接：http://www.oschina.net/translate/free-responsive-web-design-testing-tools
