響應(yīng)式Web設(shè)計(jì)是在開(kāi)發(fā)和設(shè)計(jì)網(wǎng)站過(guò)程中產(chǎn)生的一種方式,它的目的是讓內(nèi)容布局能隨用戶使用顯示器的不同而變化。再明確點(diǎn)說(shuō),這種設(shè)計(jì)概念,就是讓原本1292像素寬,4欄的內(nèi)容,能夠很好地顯示在1025像素寬的用戶屏幕上,同時(shí)還能自動(dòng)簡(jiǎn)化成2欄。當(dāng)然,讓它很好的適應(yīng)智能手機(jī)和其他種類(lèi)電腦的屏幕也就成了水到渠成的事了。這種特殊的設(shè)計(jì)形式就被成為“響應(yīng)式Web設(shè)計(jì)”。
響應(yīng)式Web設(shè)計(jì)與傳統(tǒng)的設(shè)計(jì)方式截然不同,開(kāi)發(fā)人員(特別是新手)必須要理解它的優(yōu)勢(shì)和弊端。這篇文章正是為大家揭示一些實(shí)例的。(這里介紹一個(gè)叫“Media Queries”的網(wǎng)站,里面介紹了更多實(shí)例和演示)
數(shù)據(jù)表格是響應(yīng)式Web設(shè)計(jì)的經(jīng)典使用情景,實(shí)現(xiàn)它的想法與傳統(tǒng)的設(shè)計(jì)理念有很大不同。數(shù)據(jù)表格默認(rèn)很寬,當(dāng)你要查看它全貌時(shí),你得縮小表格,但這時(shí)字會(huì)變 的很小,很難去閱讀。然而當(dāng)你想看清楚上面的字時(shí),就不得不再把表格放大,這時(shí)要查看完整表格就得橫滾加縱滾。這么閱讀表格也太KB了?;蛟S重新格式化表格或以餅圖形式展現(xiàn)是種解決方案。再不然,你可以弄一個(gè)迷你圖,即使在窄屏幕里它也能適應(yīng)。
響應(yīng)式Web設(shè)計(jì)中的圖像以流式圖像為主,可以被上下文感知的圖像所替代,這是一種更好的設(shè)計(jì)方式。這種技術(shù)的真正意義在于,能夠讓圖像適應(yīng)不同的屏幕分辨率,更大的或更小的。所以它與傳統(tǒng)設(shè)計(jì)的理念和技術(shù)都有很大不同,合理使用會(huì)讓你的網(wǎng)頁(yè)化腐朽為神奇。
Mountain Dew

AXT

Rbma Radio

Lotta Nieminen

Berger & Fohr

Cropp

Stink Digital

Hair Project

Atlanta Ballet

Google Cultural Institute

隨機(jī)推薦
- 網(wǎng)頁(yè)設(shè)計(jì) | 2008-01-22
- 網(wǎng)頁(yè)設(shè)計(jì) | 2014-01-08
- 網(wǎng)頁(yè)設(shè)計(jì) | 2017-04-17
- 網(wǎng)頁(yè)設(shè)計(jì) | 2019-06-18
- 網(wǎng)頁(yè)設(shè)計(jì) | 2014-11-18
- 網(wǎng)頁(yè)設(shè)計(jì) | 2024-06-19




















