您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 移動(dòng)前端 >> 瀏覽設(shè)計(jì)教程

20款超棒的響應(yīng)式設(shè)計(jì)測(cè)試書(shū)簽應(yīng)用

 

2013年注定了響應(yīng)式設(shè)計(jì)流行,它是網(wǎng)站設(shè)計(jì)的新的方向,從去年開(kāi)始越來(lái)越多的網(wǎng)站開(kāi)始使用響應(yīng)式的設(shè)計(jì)理念,它能夠幫助你開(kāi)發(fā)一套界面并且能運(yùn)行在所有不同分辨率的設(shè)備上,包括,PC,平板,或者移動(dòng)手機(jī)。今天我們繼續(xù)推薦給大家書(shū)簽類(lèi)型的測(cè)試工具,你可以方便的添加到你的書(shū)簽中,并且在測(cè)試響應(yīng)式網(wǎng)站的時(shí)候方便的使用。

Viewport Resizer

響應(yīng)式書(shū)簽

這個(gè)書(shū)簽號(hào)稱(chēng)擁有158個(gè)國(guó)家3萬(wàn)多活躍的用戶,主要特性:

  • 完全自定制
  • 方便的添加自定義尺寸
  • 手動(dòng)的橫豎屏切換
  • 自動(dòng)的橫豎屏切換 (portrait | landscape)
  • 支持Media query
  • 自適應(yīng)Meta的viewport設(shè)置
  • 手動(dòng)重新加載頁(yè)面
  • 移除頁(yè)面工具欄
  • Viewport相關(guān)信息顯示 (尺寸,分辨率,橫縱屏,user agent)
  • 支持觸摸設(shè)備
  • 支持vector

Resizer

響應(yīng)式書(shū)簽

這個(gè)在線書(shū)簽允許你快速的修改頁(yè)面的尺寸來(lái)測(cè)試響應(yīng)式的設(shè)計(jì). 并且支持Chrome的擴(kuò)展!

Bricss

響應(yīng)式書(shū)簽

另外一個(gè)方便的測(cè)試響應(yīng)式的書(shū)簽,你可以自己指定自己的幾套顯示窗口的尺寸。

Responsinator

響應(yīng)式書(shū)簽

這個(gè)工具提供了仿真的web界面來(lái)測(cè)試你的響應(yīng)式設(shè)計(jì),不過(guò)呢,只是界面外面套了一個(gè)設(shè)備的殼子圖片,如果你想查看實(shí)際的設(shè)備展示情況,還是應(yīng)該使用真實(shí)的設(shè)備。同時(shí),提供了一個(gè)書(shū)簽,你可以方便的添加到瀏覽器中。

ish

響應(yīng)式書(shū)簽

這個(gè)在線書(shū)簽剛出來(lái)不久,特點(diǎn)是不指定你的界面尺寸,隨機(jī)的幫助你生成界面,你可以看到你的設(shè)計(jì)在不同的窗口尺寸下的顯示特點(diǎn)。

Responsinator

Responsinator提供了大家在不同設(shè)備viewport下查看網(wǎng)站效果的特性,提供了iphone,android,ipad,kindle及其多種設(shè)備上的預(yù)覽效果,你可以方便的看到需要支持的設(shè)備的響應(yīng)式設(shè)計(jì)效果圖。

16個(gè)幫助你高效測(cè)試響應(yīng)式設(shè)計(jì)界面的工具

Responsivator

和responsinator不一樣,responsivator提供了不同尺寸下的顯示效果圖

16個(gè)幫助你高效測(cè)試響應(yīng)式設(shè)計(jì)界面的工具

 

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://irelandcustomcontracting.com/tutorial/wd20-Responsive-Design-Tests.html
移動(dòng)場(chǎng)景中的產(chǎn)品設(shè)計(jì)
overflow:hidden真的失效了嗎
圖趣網(wǎng)微信
建議反饋
×