影響前端工程師超大的3個必備技能3-Fluid Grid
身為前端工程師,RWD只學一半怎麼可以!趕快來學最後一步-流動布局!
前端工程師在撰寫RWD網站時，所使用流動布局 Fluid Grid (又稱「液態布局」或「液態網格」）是兩種技術的組合：「Grid Design (網格式設計)」和「Liquid Layout (液態排版)」，介紹如下：
Grid Design (網格式設計)
而設定相對尺寸 - 百分比 (%) 的同時，也要制定寬度的最大值與最小值。當寬度超過或低於某限制時，版面依然可以固定。這樣一來，若螢幕寬度大於其最大值時，元素的兩側就會留白，這樣就可以確保在網頁設計做完之後，網頁的版面不管在什麼裝置上都能保持適合閱讀的介面。
網頁設計的過程中，會使用<div>進行排版，寫法有兩種：「float (浮動) 」與「display-inline-block」
1.float (浮動)
下方的範例用 float 將 4 個 div 由左至右排序。在寬螢幕上可以並排展示，但是在行動裝置上，4 個 div 則會依序自動調整排列位置：後方的 div 會自動移至前一個 div 下方。結果就算位置重新調整，這 4 個 div 仍然是靠左、或靠右。因為他的原理是使用 「float: left」將元素浮動靠左對齊。你也可以用 「float: right」將元素浮動靠右對齊
2.display: inline-block
跟上述的「float (浮動) 」相同，都可將元素做到靠左對齊或靠右對齊，差異是 float (浮動) 會與其他的元素重疊。相反的，display-inline-block 就沒有這個缺點。兩者差異的例子如下：
<
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教學」系列文章第二篇，全系列文章如下:
🙋延伸閱讀區：
影響前端工程師超大的3個必備技能1-RWD是什麼何方神聖?
影響前端工程師超大的3個必備技能3-Fluid Grid
前端工程師之路現在開始-Media Query的媒體特性-上
善用網路行銷課程,每個人都來你這裡
進軍國際小撇步,選達內教育讓你輕鬆進入海外知名企業就業!
早知道畢業前就去上達內Java課程了 早點就業 少些迷惘
達內課程先就業再付款- 中時電子報
