|
響應(yīng)網(wǎng)頁設(shè)計(jì) 目前在網(wǎng)頁設(shè)計(jì)中無疑是一個熱門話題。從某種程度上來說，響應(yīng)網(wǎng)頁設(shè)計(jì)概念的普及是非常應(yīng)該的，因?yàn)橛脩粢栽絹碓蕉鄻踊姆绞皆L問網(wǎng)站。iPad，iPhone，Android移動設(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)”的，需要有三個關(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)頁布局。
重要的是要注意所有這三個特征都必須實(shí)現(xiàn)，以使真正的響應(yīng)網(wǎng)頁設(shè)計(jì)生效。
任何缺少這些特征的設(shè)計(jì)都不是一個響應(yīng)網(wǎng)頁設(shè)計(jì)。它是不可改變的。
接下來，讓我們來深入研究這三個特征，以更好的理解它們?nèi)绾稳诤喜⒔o我們帶來完整地響應(yīng)網(wǎng)頁設(shè)計(jì)。
靈活的網(wǎng)格
網(wǎng)格這個術(shù)語對于網(wǎng)頁設(shè)計(jì)來說變得很含糊。說你的網(wǎng)站必須由靈活的網(wǎng)格組成并不意味著你被限制于從 幾十個現(xiàn)有的很棒的網(wǎng)格系統(tǒng)中 選擇一個。
對于列，間距和容器定義自己的參數(shù)對于網(wǎng)頁設(shè)計(jì)來說往往是最好的方案，并且可以與任何現(xiàn)存的系統(tǒng)一樣靈活。
事實(shí)上，大多數(shù)存在的網(wǎng)格系統(tǒng)都限制于使用CSS類來定義大小，間距和排列。試著附加這些限制到一個響應(yīng)網(wǎng)頁設(shè)計(jì)上可能會很棘手并且比寫自己的布局更浪費(fèi)時間。
不管你是使用預(yù)置的網(wǎng)格系統(tǒng)還是使用自定義的解決方案，靈活網(wǎng)格系統(tǒng)真正重要的地方是你的布局大小和間距的機(jī)制。
對于網(wǎng)頁設(shè)計(jì)者，這意味著要放棄我們心愛的像素，并用百分比和em這樣的相對測量單位的網(wǎng)頁布局代替它們。
當(dāng)然，這不意味著我們不再在我們的圖像編輯軟件（即Photoshop，F(xiàn)ireworks等）中使用像素。取而代之的是，增加的一個需要簡單的數(shù)學(xué)計(jì)算的步驟成為網(wǎng)頁設(shè)計(jì)過程的一部分，因?yàn)槲覀円獙⑽覀兊南袼剞D(zhuǎn)化為使用相對單位的網(wǎng)頁布局。
St Paul’s School 網(wǎng)站使用了靈活的網(wǎng)格布局，它可以根據(jù)瀏覽器的窗口大小改變布局，布局的改變以平滑的動畫來展示。
出處：rockux
責(zé)任編輯：bluehearts
上一頁 下一頁 理解響應(yīng)網(wǎng)頁設(shè)計(jì)元素 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 理解響應(yīng)網(wǎng)頁設(shè)計(jì)元素 [1]
第 2 頁 
