頂尖前端工程師必備技能之三-流動布局(Fluid Grid)設計

頂尖前端工程師必備技能之三-流動布局(Fluid Grid)設計

頂尖前端工程師必備技能之三-流動布局(Fluid Grid)設計
頂尖前端工程師必備技能之三-流動布局(Fluid Grid)設計

想成為頂尖前端工程師,一定不能不知道流動布局!快跟著我一起來認識它吧!

前端工程師在撰寫RWD網站時,所使用流動布局 Fluid Grid (又稱「液態布局」或「液態網格」)是兩種技術的組合:「Grid Design (網格式設計)」和「Liquid Layout (液態排版)」,介紹如下:

Grid Design (網格式設計)

前端工程師在設計網頁時,經常會設定相對尺寸 – 百分比 (%)以外 ,也要制定寬度的最大值與最小值。當寬度超過或低於某限制時,版面依然可以固定。這樣一來,若螢幕寬度大於其最大值時,元素的兩側就會留白,這樣就可以確保網頁的版面不管在什麼裝置上都能保持適合閱讀的介面。

網頁設計過程中,會使用<div>進行排版,寫法有兩種:「float (浮動) 」與「display-inline-block」

1.float (浮動)

下方的範例用 float 將 4 個 div 由左至右排序。在寬螢幕上可以並排展示,但是在行動裝置上,4 個 div 則會依序自動調整排列位置:後方的 div 會自動移至前一個 div 下方。

See the Pen float-right-n-left by Tedutw (@Tedutw) on CodePen.

過就算位置重新調整,這 4 個 div 仍然是靠左、或靠右。因為他的原理是使用 「float: left」將元素浮動靠左對齊。你也可以用 「float: right」將元素浮動靠右對齊

2.display: inline-block

跟上述的「float (浮動) 」一樣都可以將元素做到靠左或式靠右對齊,差異是 float (浮動) 會與其他的元素重疊。display-inline-block 就沒有這個缺點。兩者差異的例子如下:

See the Pen float vs inline:block by Tedutw (@Tedutw) on CodePen.

Liquid Layout (液態排版)

 

另一個能達成「流動布局 Fluid Grid」的技術是「Liquid Layout (液態排版)」,主要原理就是把尺寸單位改成百分比來製作版面,使每一個區塊的尺寸都能根據瀏覽器的大小自動做調整,而非以固定的尺寸呈現。參考語法如下:

div{
  width: 36%
}

但是一開始寫網頁時,就使用百分比 (%) 這類的相對尺寸來制定元素的大小是有難度的。這時就可以先以固定尺寸 (px) 來製作,等網頁完成後再轉換成相對尺寸 (%) 。

轉換公式參考:子元素的百分比 ={欲變更元素的固定尺寸 / 父元素的固定尺寸}*百分比。

舉例來說:假設整個網頁版面是用 1024px 固定寬度來設計,而要變更的 div 區塊寬度為 360px,則整個網頁版面可視為父元素;欲變更的 div 區塊則視為它的子元素,此例套用公式則為:{360px (欲變更元素的固定值) / 1024px (父元素的固定尺寸)}*百分比 = 35.15625%。

除了各子元素可以這樣換算之外,padding 跟 margin 也可以用這個方法來換算,範例如下 :

padding: 8px,換算成百分比的公式為:
{8px / 1024px (網頁版面的固定尺寸,視為父元素)}*百分比 = 0.78125% 這時 padding: 0.78125%。

本篇為「前端工程師的基礎RWD教學」系列文章第二篇,全系列文章如下:

前端工程師的基礎RWD教學系列文章目錄

  1. 前端工程師的基礎RWD教學(一)RWD基礎概念
  2. 前端工程師的基礎RWD教學(二)流動布局Fluid Grid
  3. 前端工程師的基礎RWD教學(三)Media Query基礎之Media Query使用方法
  4. 前端工程師的基礎RWD教學(四)Media Query基礎之Media Type媒體類型
  5. 前端工程師的基礎RWD教學(五)Media Query基礎之and/not/only判斷條件
  6. 前端工程師的基礎RWD教學(六)Media Query基礎之Media Features-上
  7. 前端工程師的基礎RWD教學(七)Media Query基礎之Media Features-下
  8. 前端工程師的基礎RWD教學-(八)流動圖片Fluid Image

 

推薦文章:
頂尖前端工程師必備技能之四-設定流動圖片Fluid Image


頂尖前端工程師必備技能之二-Media Queries使用技巧


前端工程師與後端工程師傻傻分不清?從以下幾點就可以輕鬆分辨!


想用語音辨識但怕自己有台灣國語?別擔心!這人工智慧聽得懂!


網頁設計學習零負擔-簡易的HTML5教學


Java課程、UI課程、程式課程、網路行銷課程推薦


還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *