網(wǎng)頁設(shè)計中基礎(chǔ)布局

時間：2023-10-01 06:30:01 | 來源：網(wǎng)站運營

時間：2023-10-01 06:30:01 來源：網(wǎng)站運營

網(wǎng)頁設(shè)計中基礎(chǔ)布局：

網(wǎng)格系統(tǒng)

一般而言，網(wǎng)頁會有一塊主體區(qū)域，網(wǎng)站內(nèi)容都包含在這塊區(qū)域中。

為了展示更多內(nèi)容，但又支持盡可能多的顯示器尺寸，就會要求主體區(qū)域盡可能的小但又足夠大。
根據(jù)這一特定要求，早年孕育而生了「960網(wǎng)格系統(tǒng)」。網(wǎng)格系統(tǒng)，就是將主體區(qū)域劃分成若干等份的列，列與列之間保持等份的間隙。它既能在設(shè)計中為設(shè)計師提供布局參考，又能為前端工程師提供標(biāo)準(zhǔn)化的創(chuàng)建區(qū)塊提供依據(jù)。
960網(wǎng)格系統(tǒng)是由 Twitte推出的一套網(wǎng)格規(guī)范，由12、16、24列不同的等份法。12列等份是我們常用的一種方式。 隨著屏幕的逐漸增大及網(wǎng)頁樣式的豐富，960網(wǎng)格開始在某些地方不太適合，或者說看起來有些low了。于是出現(xiàn)了更寬的主題區(qū)域，比如1000px、1100px甚至1200px等等。

但這些寬度的使用伴隨著一個風(fēng)險，就是前面提到的 盡可能多的兼容顯示器的寬度。

關(guān)于這個問題，首先你得了解現(xiàn)在主流分辨率是多少。

早期的大屁股顯示器的分辨率是1024*768，所以960是一個比較合適的數(shù)字。

現(xiàn)在的筆記本多為1366*768，而21寸以上的臺式機是1920*1080。

所以，以現(xiàn)在的眼光來看。你的頁面設(shè)計不要突破1200px，否則就“危險”了。

網(wǎng)格系統(tǒng)中值得注意的是，有人會嚴(yán)格按照12列，每列60px，邊欄寬10px這種做法來應(yīng)用到設(shè)計過程中。但其實當(dāng)我們真正明白網(wǎng)格在前端設(shè)計中的原理的時候就完全可以打破這個約束框架。你只要保證所有列是等份并且列的間隙也是等份，并且保證它們是偶數(shù)（除以2之后還是整數(shù)）。

自適應(yīng)和響應(yīng)式

自適應(yīng)網(wǎng)頁設(shè)計（Responsive Web Design）最早是由Ethan Marcotte在2010年提出，是指可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。

隨著移動化網(wǎng)頁需求的增長，在自適應(yīng)基礎(chǔ)上又誕生了響應(yīng)式網(wǎng)頁設(shè)計（Adaptive Web Design）。

兩者最大的區(qū)別在于

• 前者只根據(jù)瀏覽器寬度作出布局的調(diào)整，后者是根據(jù)設(shè)備的不同而作出的調(diào)整。
• 前者的調(diào)整只停留在左右上下位置上的調(diào)整，后者涉及到內(nèi)容的增減等。

在這項技術(shù)的支持下，我們現(xiàn)在能看到很多網(wǎng)站把最大主體區(qū)域做到了1600px，但同時又支持手機正常顯示。1920*1080分辨率下的Behance網(wǎng)站主體區(qū)域占到1600px的寬度iPhone上的Behance在改變布局樣式之外，額外在頂部添加了下載安裝應(yīng)用的提示

網(wǎng)格系統(tǒng)在響應(yīng)式設(shè)計中同樣是起作用的。當(dāng)然，根據(jù)不同主體區(qū)域大小你需要多套網(wǎng)格系統(tǒng)同時運用。

在做響應(yīng)式設(shè)計之前，你需要確定好需要在那些結(jié)點做變化。也就是當(dāng)窗口大于這個尺寸時候是什么樣子，當(dāng)小于這個尺寸又是什么樣子。確定有幾個節(jié)點，這些節(jié)點內(nèi)的網(wǎng)格系統(tǒng)是什么樣的等具體的排布問題。

Bootstrap是一套支持響應(yīng)式的前端框架，我們可以從對它的研究中來尋找響應(yīng)式設(shè)計的一些技術(shù)支持。從文檔中我們看到Bootstrap分了三個結(jié)點，四種布局，分別對應(yīng)臺式顯示器、筆記本、平板電腦和手機。

因為它是一個框架，需要支持盡量多的自定義，所以每種布局都運用了12欄的網(wǎng)格系統(tǒng)，我們在實際項目中并不需要如此統(tǒng)一的劃分。比如在手機中，一般都會上下堆砌，最多不會超過3欄。

關(guān)于網(wǎng)頁的基礎(chǔ)布局問題可以講的還有非常多，960雖然已經(jīng)使用多年，但在個人博客或者一些地方還是有著非常廣泛的使用，其中的門道也是非常的多。

至于響應(yīng)式設(shè)計，需要關(guān)注的點更是隨著判斷情況的增多而需要考慮的也更為復(fù)雜，比如導(dǎo)航欄、圖片、內(nèi)容的樣式的變化及信息的刪減等。

這些內(nèi)容以后有機會我會慢慢再跟各位分享～

更多設(shè)計文章，歡迎關(guān)注我的博客「貓屋羊舍」，地址：http://sjfan.net，定期為你帶來設(shè)計文章。