布局類型

一塊麵包加了鹽，就會變咸；一塊麵包加了糖，就會變甜。一塊同樣的麵包，就因為加了不同的調料就會有不同的味道。同樣的，同一個的設計稿，用不同的網頁布局去製作，就會得到完全不一樣的網頁風格！

這裡所說的網頁布局，並不是一搜百度就出來的什麼全屏布局類型、中心排列類型等等，這些是偏向設計師的角度，畢竟設計師設計一個網頁排版一天一個不重樣都行！沒有太大的討論意義！

各式各樣的網頁排版

但是無論哪一種網頁設計排版，都不得不面對一個問題：面對不同的設備尺寸，網頁要怎麼處理。

接下來所說的網頁布局，偏向程序員角度，主要解決網頁和設備尺寸的搭配關係。

靜態布局

這種布局也叫做『固定布局』，是最原始的網頁布局類型，任何人剛接觸前端，做出的網頁都是這種。

這種布局最大的特點，就是網頁是固定的寬度，通常以px為單位長度，常見於pc端網頁。很多新聞類、資訊類網站都是採用這種布局類型。

像是360導航頁，中間主體內容是固定寬度

這種布局具有很強的穩定性與可控性，也沒有兼容性問題，但不能根據用戶的屏幕尺寸做出不同的表現。即如果用戶的屏幕解析度小於這個寬度就會出現滾動條，如果大於這個寬度則會留下空白。

自適應布局

隨著電腦屏幕做來做大，24寸、27寸的電腦屏幕作為主流，靜態布局的網頁就顯得非常難看。因為如果網頁是以14寸電腦屏幕的尺寸作為基礎，偌大的屏幕，就顯示一點點內容。

同樣如果網頁是以27寸電腦屏幕作為尺寸基礎，13寸筆記本瀏覽此網頁，就會出現滾動條。

很明顯，需要一種能夠自己適應不同尺寸寬度的布局，能夠等比例縮放大小，這種布局就是自適應布局。

自始至終，都是鋪滿屏幕

這種自適應布局的好處很明顯，可以適配大部分顯示屏不同的尺寸，而且還可以隨著瀏覽器窗口調整而動態調整，體驗效果又上了一級。

當然代碼量、難度肯定是比靜態布局要多了，要實現這種布局不能只靠px固定單位，還需要結合%百分比、rem等動態單位。

響應式布局

自從iPhone4面世以來，手機、平板等移動設備使用時常越來越長，這就意味著網頁也要適配移動設備。

自適應布局確實能解決適配不同尺寸的難題，但是有個局限性，就是只適用於電腦端，例如14寸的筆記本和5寸的手機，同時顯示自適應布局的網頁，就會發現手機里的網頁，小到無法瀏覽。

自適應布局的本質就是網頁根據屏幕的大小等比例放大縮小。很明顯手機這類小尺寸屏幕根本不適合，更何況現在還有智能手錶呢！

面對這種情況，就需要一個網頁有多套樣式，根據屏幕的大小，切換不同的樣式。

就像變臉，但依然是同一個網頁

在實際開發中，往往都是自適應和響應式一起使用，兩個是不衝突。比如根據屏幕寬度，自定義出手機樣式和電腦樣式（響應式）。無論是那種樣式，都需要做自適應處理，進一步提升體驗。

毫無疑問，這種布局當然是最完美，但是工作量非常大，這就需要藉助第三方ui框架開發，例如bootstrap等等。

瀑布流式布局

這幾年的審美也在不斷豐富，例如出現了瀑布流式布局，裡面的元素會像水流填滿每一處。這種布局很受女性購物網站歡迎，蘑菇街就是這種設置。

女性很偏愛這種風格

總結

實際開發中，往往都是多種布局結合在一起，各取優處，才能把前端的體驗做到極致！