移動端rem頁面詳談

標籤：

rem布局是移動端常見的布局之一，也是較為成熟的方案。接下來就詳細說以下rem布局的實際操作。

1.首先加<meta />標籤，設定視口的大小，不多說。

<meta name="viewport" content="width=device-width initial-scale=1"  />

2給html設定字型大小 ,設定為font-size;20px;

3添加一段js 動態控制根節點字型的大小

(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);

4 將psd圖大小縮放，寬為320px;這個值也不是固定的，但要與上面js中的數值相一致。

5此時，根節點的字型大小為20px；只要將所測量的尺寸除以20加單位rem就可以了。

移動端rem頁面詳談