首頁?>?知識(shí)?資訊?>?什么是RWD響應(yīng)式網(wǎng)頁設(shè)計(jì)??>?正文

什么是RWD響應(yīng)式網(wǎng)頁設(shè)計(jì)?

2019/9/19 0:00:00 · 稿源:傳誠信

RWD中文譯為響應(yīng)式網(wǎng)頁設(shè)計(jì)(Responsive Web Design,簡(jiǎn)稱RWD),維基百科譯為「自適應(yīng)網(wǎng)頁設(shè)計(jì)」、「回應(yīng)式網(wǎng)頁設(shè)計(jì)」。因智慧型手機(jī)、平板電腦等智慧型行動(dòng)裝置的出現(xiàn),各種裝置具有不同的螢?zāi)淮笮 ⒈壤?,為了滿足使用者于平板、手機(jī)等各種螢?zāi)粚挾壬暇W(wǎng)的體驗(yàn),而出現(xiàn)的網(wǎng)頁制作架站技術(shù)。采用響應(yīng)式網(wǎng)頁設(shè)計(jì)技術(shù)制作的網(wǎng)站,可在同一個(gè)網(wǎng)站架構(gòu)內(nèi),同時(shí)符合桌上型電腦、筆記型電腦、平板、手機(jī)等不同螢?zāi)粚挾鹊慕槊?,達(dá)成第一次介面優(yōu)化。

what-is-responsive-web-design.jpg

響應(yīng)式網(wǎng)頁于各個(gè)不同的載具介面呈現(xiàn)示意圖,會(huì)因?yàn)槲災(zāi)淮笮《S著改變。

RWD響應(yīng)式網(wǎng)頁設(shè)計(jì)的原理與歷史

Josh Clark針對(duì)「響應(yīng)式」提出了以下的比喻「內(nèi)容如同水一般」,可以把網(wǎng)頁的內(nèi)容想像成水,一樣是500cc的水,但是在不同的容器會(huì)有不同的樣子,會(huì)依照裝水的容器外型隨之改變,如下圖左方;相同的網(wǎng)頁內(nèi)容,在智慧型手機(jī)、平板、桌上型電腦就會(huì)如同水一樣,會(huì)依照不同的寬度大小呈現(xiàn)不同的樣子,如下圖右方:

content-is-like-water.jpg

由于智慧型手機(jī)螢?zāi)惠^窄、較長的關(guān)系,因此介面設(shè)計(jì)較電腦版網(wǎng)頁精簡(jiǎn),例如主選單的設(shè)計(jì)常常采用三條線或是加號(hào)的設(shè)計(jì),在網(wǎng)頁設(shè)計(jì)的術(shù)語稱作「漢堡包」,如同ccxcn官方網(wǎng)站右上方的設(shè)計(jì)。

以下提供您簡(jiǎn)單的響應(yīng)式網(wǎng)頁設(shè)計(jì)歷史:

  • 2002年:Audi.com在當(dāng)時(shí)設(shè)計(jì)出第一個(gè)能符合螢?zāi)淮笮∵M(jìn)而縮放的網(wǎng)站,這里有來自當(dāng)時(shí)開發(fā)作者的介紹。

  • 2010年:由Ethan Marcotte提出了「Responsive Web Design」響應(yīng)式網(wǎng)頁設(shè)計(jì)一詞。

  • 2013年:Mashable(網(wǎng)際網(wǎng)路新聞部落格)將2013年定為響應(yīng)式網(wǎng)頁設(shè)計(jì)年,從此開始在世界各地流行。


  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時(shí)咨詢熱線

139-1050-5354