- 固定 Fixed
使用 px 和 pt 這樣的絕對單位進行固定布局。在無論什么設備上保持固定的尺寸，在不適合的分辨率下可能導致大面積空白或橫向滾動條。最經典，也是被證明極其不友好、維護困難的方法。 - 流動 Fluid
使用 % 百分比進行相對布局。可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種分辨率。往往配合 max-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。某些情況下可能導致錯誤的伸縮或者布局被破壞。 - 彈性 Elastic
使用 em 或 rem 單位進行相對布局。避免了根據 px 布局在高分辨率下幾乎無法辨認的缺點，又相對 % 百分比更加靈活，同時可以支持瀏覽器的字體大小調整和縮放等的正常顯示。需要一段時間適應而且不易從其他布局轉換過來，但幾乎是目前最好的布局方式。 - 伸縮 Flexbox
使用 CSS3 Flex 系列屬性進行相對布局。對於富媒體和復雜排版的支持非常強大，但是還未普及並且兼容性較差。 - 響應式 Responsive
使用 @media 媒體查詢 給不同尺寸和介質的設備切換不同的樣式。在優秀的響應范圍設計下可以給適配范圍內的設備最好的體驗，但是在同一個設備下實際還是固定的布局，並且因為瀏覽器的支持原因對介質的檢測還不實用。 - 自適應 Adaptive
通常使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對布局單位進行布局，實際上就是利用響應式、流動等上述技術通過 CSS 給單一網頁不同設備返回不同樣式的技術綜合統稱。自適應幾乎已經成為優秀頁面布局的標准。
彈性布局在一眾相對布局中毫無疑問擁有極大的優勢。除了以上提到的幾點之外，以下幾點也是非常有用的特性：
- 優秀的兼容性
不同於 FlexBox 等初生標准，瀏覽器對於 em 的支持非常的好，同時對於 rem 的支持也比預料中稍佳。如果使用 LESS 或者 SASS 等 CSS 預處理器，還可以做對於低版本瀏覽器 (IE8-) 的 px 降級處理。CanIUse 的兼容表 - 哇！我看不到像素點
使用絕對尺寸單位進行布局的最大缺點，就是在動輒1080P的手機屏幕上將小到難以閱讀，同時過高的分辨率也會使媒體查詢無法發揮應有的功效。但是如果使用 em 字體大小進行布局，就可以方便的利用系統默認字號設定了。 - 對於瀏覽器用戶字體大小設置的支持
對於視力障礙和殘障人士，可以在瀏覽器的設置中更改字體的大小，但不同瀏覽器迥異的縮放模式經常使得使用固定尺寸單位的網站布局崩潰，而這種時候 EMs 單位可以保證完全一致自然的效果。 - 對於頁面縮放的響應式支持
在平常閱讀中也常有縮放頁面的需要，彈性布局可以在縮放中正確的激活響應式。反觀使用絕對單位判斷的響應式，可能在部分瀏覽器中當縮放的實際顯示空間不夠時仍然使用為大可視區域設計的樣式，容易導致布局崩潰。不過在現代瀏覽器中已經會激活對應的查詢。 - 保持一致的換行
完全使用 EMs 單位進行布局的話，縮放過程中文字和圖片不會產生流動，可以完美的保持布局的美觀和穩定。
盡管如此，隨之而來的還有一些美中不足的小問題。如果還有發現其他弊端，也歡迎 在此回復 。
- 如何惹惱 Work Flow 上的其他人
在完整的工作流程中，各種原型、視覺、切圖很難全部使用 em 作為計量單位，只能在前端實現的時候轉換。而且默認的 1em:16px 計算也較為不便，后面會提到一個巧妙的解決方法。 - 麻煩的父級元素 font-size 繼承
如果使用 em 作為尺寸單位，因為 em 相對父元素 font-size 值進行計算的特性，如果中間有對元素的字體大小進行更改，子元素的全部布局就會出錯。這點現在可以很方便的通過相對於根元素的 rem 單位計量來避免。 - 不該放大的圖片
假如為圖片使用了 em 設定尺寸，在響應不同設備的字體時就會按比例增大而導致模糊。但是如果使用常規的 px 設定尺寸，又會失去文字排版均一的好處。考慮到平常的設計中文字流動並沒有影響，可以稍微犧牲可用性而用 px 設定圖片尺寸。 - 養成壞習慣容易，好習慣難
從 ems 單位切換到 px 或者 pt 只需要簡單的單位轉換，而從絕對單位向彈性布局轉換絕對不是一個好的體驗。因此在項目開始時就應該確定好彈性布局的基礎，否則后期遷移並不容易。
那么如何開始一個彈性布局的頁面呢？不不不，除了使用 em 作為單位表示尺寸之外，還有一些可以用到的技巧：
- 為根元素設置 font-size: 100%
在 IE 上的文字縮放選項並不符合常規情況下的預期，即在特大和特小的情況下縮放不是平滑的，很容易導致文字被縮放到難以閱讀的程度。此時就可以為 <html> 元素指定 100% 的字體大小，以即時響應用戶的縮放。 - 為文檔元素設置 font-size: 62.5%
先前已經提到過，盡管所有瀏覽器都一致的保持着 16px 的默認字號，但是 1:16 的比例明顯十分不方便計算。將字號設為 10px 會使 Ems 布局前功盡棄，此時通過設置為 16px 的 62.5% 就可以很方便的利用十進制進行計算了。當然如果你選擇使用的是 rem 為單位，需要犧牲低版本 IE 的兼容性將 <html> 的 font-size 設為 62.5% 。 - 為媒體查詢使用 ems
對於前面提到的對 Retina 高清分辨率屏幕的支持，使用 em 為單位的媒體查詢就是一個有用的技巧。當每行能容納的文本少於某個值時進行響應而不是寬度為某個像素進行響應，將會大大改善響應式設計的使用體驗。 - 為 rem 使用預處理器
隨着 rem 的推出，彈性布局最大的麻煩之一得到解決。但是盡管 em 的支持已很有歷史， rem 卻僅支持最新的幾個瀏覽器版本，在低版本瀏覽器上的顯示效果將會是災難級的。提前使用 SASS 等 CSS 預處理器為低版本瀏覽器准備好一個 px 為單位的降級很有必要，這里不再詳述，可自行查找相關資料。
基本上只要明確了以上幾點，就可以按平常的方法繼續進行網頁的布局。不過正因為彈性布局是一個為閱讀體驗而生的技術，在這方面稍加注意，還可以更好的發揮彈性布局的優勢。
- 讓行高保持節奏
這是一個提高閱讀體驗的絕妙方法 —— 讓所有元素的行高始終保持為一個值的倍數，想想網頁是平鋪在一個有行線的筆記本上，讓每個元素都完美的占據多格的中間而不壓線。請注意，沒有閱讀體驗的彈性布局一文不值。 - 提供不同文字大小的樣式
很多站點都會為了照顧不同用戶提供大中小的樣式表，在彈性布局下的實現更加容易。如果用戶不懂得更改瀏覽器的顯示設定，僅需要提供 body 元素 font-size 不同的幾個樣式表，即可馬上對整個網頁進行縮放。 - 不必關注像素，而是比例
盡管為了配合視覺設計我們需要在實際過程中進行 px 到 em 的轉換，但是因為縮放的存在，實際需要聚焦的核心不是尺寸本身而是整體布局的比例。只要確定正常視圖下布局處在一個合理的大小和位置，剩下的交給 ems 就好了。 - 脫離樣式表可用
這是和彈性布局無關的一條可用性建議。永遠為網頁保持合理的 DOM 結構，不為了樣式服務顛倒順序，讓網頁即使脫離樣式表也十分完美。如此一來就算是在屏幕閱讀器、字符瀏覽器等極端環境下，仍然可以保持最大化的體驗。