web app 自適應方案總結 關鍵字 彈性布局之rem

標籤：

總結下現在移動端 web app 的調適型配置的方案有 5種，依次成熟。

零. Flexbox

       使用css3 flexbox 進行布局，對於富媒體和複雜排版的支援非常強大，未普及相容性非常差，幾乎沒有在任何項目中得到應用。

一. 彈性布局

        使用 em 或 rem 單位進行相對布局，又相對 % 百分比更加靈活，同時可以支援瀏覽器的字型大小調整和縮放等的正常顯示。 

二. 流式布局（Fluid）

         使用 % 百分比定義寬度，高度大都是用px來固定住，可以根據可視地區 (viewport) 和父元素的即時尺寸進行調整，儘可能的適應各種解析度。往往配合 max-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。代表作柵欄系統（網格系統）

三. 響應式布局（Responsive）

        使用 @media 媒體查詢 給不同尺寸和介質的裝置切換不同的樣。在優秀的響應範圍設計下可以給適配範圍內的裝置最好的體驗，在同一個裝置下實際還是固定的布局。

四. 調適型配置（ Adaptive）

         通常使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同裝置返回不同樣式的技術統稱。自適應幾乎已經成為優秀頁面配置的標準。

 

這篇文章主要講的是rem的使用。

css3 中引入了新的長度單位，rem。

rem:rem和em單位一樣，都是一個相對單位。不同的是em是相對於元素的父元素的font-size進行計算；rem是相對於根項目html的font-size進行計算。這樣一來rem就繞開了複雜的層級關係，實現了類似於em單位的功能。

相容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支援。

 

web app 自適應方案總結 關鍵字 彈性布局之rem