理解響應網頁設計元素

響應網頁設計 目前在網頁設計中無疑是一個熱門話題。從某種程度上來說，響應網頁設計概念的普及是非常應該的，因為用戶以越來越多樣化的方式訪問網站。iPad，iPhone，Android移動設備，桌面，筆記本——現在我們的網頁設計必須在眾多方式下使用。

讓我們來了解響應網頁設計的含意和原則。

響應網頁設計的關鍵特征

認為網頁設計是“響應”的，需要有三個關鍵牲。網頁設計師和開發者Ethan Marcotte——提出響應網頁設計的人——將這些特征描述如下：

• 網站必須以靈活的網格為基礎構建。
• 設計中包含的圖片也必須是靈活的。
• 在不同的環境中必須可以通過媒體查詢擁有不同的視圖。

CSS-Tricks 根據瀏覽器窗口的大小改變它的網頁布局。

重要的是要注意所有這三個特征都必須實現，以使真正的響應網頁設計生效。

任何缺少這些特征的設計都不是一個響應網頁設計。它是不可改變的。

接下來，讓我們來深入研究這三個特征，以更好的理解它們如何融合并給我們帶來完整地響應網頁設計。

靈活的網格

網格這個術語對于網頁設計來說變得很含糊。說你的網站必須由靈活的網格組成并不意味著你被限制于從 幾十個現有的很棒的網格系統中 選擇一個。

對于列，間距和容器定義自己的參數對于網頁設計來說往往是最好的方案，并且可以與任何現存的系統一樣靈活。

事實上，大多數存在的網格系統都限制于使用CSS類來定義大小，間距和排列。試著附加這些限制到一個響應網頁設計上可能會很棘手并且比寫自己的布局更浪費時間。

不管你是使用預置的網格系統還是使用自定義的解決方案，靈活網格系統真正重要的地方是你的布局大小和間距的機制。

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

當然，這不意味著我們不再在我們的圖像編輯軟件（即Photoshop，Fireworks等）中使用像素。取而代之的是，增加的一個需要簡單的數學計算的步驟成為網頁設計過程的一部分，因為我們要將我們的像素轉化為使用相對單位的網頁布局。

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈