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

關於rem，主要參考文檔

1。騰訊ISUX (http://isux.tencent.com/web-app-rem.html)

2。http://www.w3cplus.com/css3/define-font-size-with-css3-rem 

 

如今移動端 web app 的自適應佈局的方案有 5種。

零. Flexbox

       使用css3 flexbox 進行佈局，對於富媒體和複雜排版的支持很是強大，未普及兼容性很是差，幾乎沒有在任何項目中獲得應用。

一. 彈性佈局

        使用 em 或 rem 單位進行相對佈局，相對 % 百分比更加靈活，同時能夠支持瀏覽器的字體大小調整和縮放等的正常顯示。 由於em是相對父級元素的緣由 沒有獲得推廣。

二. 流式佈局（Fluid）

         使用 % 百分比定義寬度，高度大都是用px來固定住，能夠根據可視區域 (viewport) 和父元素的實時尺寸進行調整，儘量的適應各類分辨率。每每配合 max-width 等屬性控制尺寸流動範圍以避免過大或者太小影響閱讀。表明做柵欄系統（網格系統）

三. 響應式佈局（Responsive）

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

四. 自適應佈局（ Adaptive）

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

 

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

css3 中引入了新的長度單位，rem。  官方定義 font size of the root element

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

兼容性：IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持。（IE6-8不支持  不過考慮是移動端web app  ）

 

1.針對設計稿 計算rem

全部瀏覽器都一致默認保持着 16px 的默認字號 1em:16px ，可是 1:16 的比例不方便計算。在這裏文檔元素設置 font-size: 62.5%，能夠很方便的利用十進制進行計算了，（CSS 預處理工具可使用默認值）

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

因此若是我有一個寬度爲640的設計稿，經過上面的方法算出對應元素rem的大小　。（附註：實際項目不能夠設置成 font-size: 62.5%,由於chrome不支持小於12px的字體，計算小於12px的時候，會默認取12px去計算，致使chrome的rem計算不許確）

 

2。針對不一樣分辨率計算font-size

監聽瀏覽器更改 html的font-size

        (function (doc, win) {
          var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
              var clientWidth = docEl.clientWidth;
              if (!clientWidth) return;
              docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
            };

          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);

配合css預處理工具計算 rem 值。 Sass、LESS 、Stylus