理解響應(yīng)網(wǎng)頁設(shè)計(jì)元素

響應(yīng)網(wǎng)頁設(shè)計(jì) 目前在網(wǎng)頁設(shè)計(jì)中無疑是一個(gè)熱門話題。從某種程度上來說，響應(yīng)網(wǎng)頁設(shè)計(jì)概念的普及是非常應(yīng)該的，因?yàn)橛脩粢栽絹碓蕉鄻踊姆绞皆L問網(wǎng)站。iPad，iPhone，Android移動(dòng)設(shè)備，桌面，筆記本——現(xiàn)在我們的網(wǎng)頁設(shè)計(jì)必須在眾多方式下使用。

讓我們來了解響應(yīng)網(wǎng)頁設(shè)計(jì)的含意和原則。

響應(yīng)網(wǎng)頁設(shè)計(jì)的關(guān)鍵特征

認(rèn)為網(wǎng)頁設(shè)計(jì)是“響應(yīng)”的，需要有三個(gè)關(guān)鍵牲。網(wǎng)頁設(shè)計(jì)師和開發(fā)者Ethan Marcotte——提出響應(yīng)網(wǎng)頁設(shè)計(jì)的人——將這些特征描述如下：

• 網(wǎng)站必須以靈活的網(wǎng)格為基礎(chǔ)構(gòu)建。
• 設(shè)計(jì)中包含的圖片也必須是靈活的。
• 在不同的環(huán)境中必須可以通過媒體查詢擁有不同的視圖。

CSS-Tricks 根據(jù)瀏覽器窗口的大小改變它的網(wǎng)頁布局。

重要的是要注意所有這三個(gè)特征都必須實(shí)現(xiàn)，以使真正的響應(yīng)網(wǎng)頁設(shè)計(jì)生效。

任何缺少這些特征的設(shè)計(jì)都不是一個(gè)響應(yīng)網(wǎng)頁設(shè)計(jì)。它是不可改變的。

接下來，讓我們來深入研究這三個(gè)特征，以更好的理解它們?nèi)绾稳诤喜⒔o我們帶來完整地響應(yīng)網(wǎng)頁設(shè)計(jì)。

靈活的網(wǎng)格

網(wǎng)格這個(gè)術(shù)語對(duì)于網(wǎng)頁設(shè)計(jì)來說變得很含糊。說你的網(wǎng)站必須由靈活的網(wǎng)格組成并不意味著你被限制于從 幾十個(gè)現(xiàn)有的很棒的網(wǎng)格系統(tǒng)中 選擇一個(gè)。

對(duì)于列，間距和容器定義自己的參數(shù)對(duì)于網(wǎng)頁設(shè)計(jì)來說往往是最好的方案，并且可以與任何現(xiàn)存的系統(tǒng)一樣靈活。

事實(shí)上，大多數(shù)存在的網(wǎng)格系統(tǒng)都限制于使用CSS類來定義大小，間距和排列。試著附加這些限制到一個(gè)響應(yīng)網(wǎng)頁設(shè)計(jì)上可能會(huì)很棘手并且比寫自己的布局更浪費(fèi)時(shí)間。

不管你是使用預(yù)置的網(wǎng)格系統(tǒng)還是使用自定義的解決方案，靈活網(wǎng)格系統(tǒng)真正重要的地方是你的布局大小和間距的機(jī)制。

對(duì)于網(wǎng)頁設(shè)計(jì)者，這意味著要放棄我們心愛的像素，并用百分比和em這樣的相對(duì)測量單位的網(wǎng)頁布局代替它們。

當(dāng)然，這不意味著我們不再在我們的圖像編輯軟件（即Photoshop，F(xiàn)ireworks等）中使用像素。取而代之的是，增加的一個(gè)需要簡單的數(shù)學(xué)計(jì)算的步驟成為網(wǎng)頁設(shè)計(jì)過程的一部分，因?yàn)槲覀円獙⑽覀兊南袼剞D(zhuǎn)化為使用相對(duì)單位的網(wǎng)頁布局。

St Paul’s School 網(wǎng)站使用了靈活的網(wǎng)格布局，它可以根據(jù)瀏覽器的窗口大小改變布局，布局的改變以平滑的動(dòng)畫來展示。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)