px轉換成rem的工具指南

如今有工具進行轉換咱們能夠不須要去心算各類單位了，切圖的時候直接用px，而後頁面切完後，將樣式丟到工具中進行轉換，秒秒中就能把樣式中全部px單位轉成rem。

第一步：頁面加入根元素計算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 = 100 * (clientWidth / 320) + 'px';
    };

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

　　

第二步：將你寫好的CSS文件丟入工具進行轉換

在這裏要解釋下爲何對border的各類屬性不進行處理，由於border在安卓下使用rem單位的支持性特別差，你可能寫2rem或者3rem都沒用默認會變成1px，因此在使用border屬性時不少時候不建議處理border。

 

工具地址：http://520ued.com/tools/rem