單位rem 觸屏適配總結

總結過的：定寬320 縮放適配手機屏幕

參考文章：web app變革之rem

 

先了解一下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  ）

 

設置rem的小練習

html的font-size設置為20px

html{font-size: 20px;}
		button{width: 5rem;height: 2rem;background-color: orange;color: #fff;font-size: 1.2rem;border:0;}

　　

 

html的font-size設置為40px

 

從這個小練習里就可以知道rem單位元素的大小是根據html font-size變化的，這就是rem做適配的原理。

 

rem用法很簡單，就是根標簽html設置文字大小后（不設置的話，大部份瀏覽器默認為16px），其他標簽設置rem都是html大小的倍數。

html{
    font-size: 10px; /* 設置html為10px */
}
h1{
    font-size: 2rem; /* 10px*2=20px */
}

　　

rem切稿開發

那么我們怎么把設計稿里的單位轉換成rem進行開發呢？

首先假設我的頁面設計稿給我時候是按照640的標准尺寸給我的前提下，（當然這個尺寸肯定不一定是640，可以是320，或者480，又或是375）來看一組表格。

屏幕根據設計稿的比例轉換對應的rem值，比如：

640的設置 = 20*(clientWidth/320) 

320的設置 = 10*(clientWidth/320) 

設置html font-size的工作我們交給js去實現，所以我的切稿元素都按照 (元素設計稿px/20 = 最終的rem):

/*rem adaptation*/
(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 = 10*(clientWidth / 320) + 'px';
      };

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

})(document, window);

　　

 

最后再看一下實例效果：

所有元素margin padding font-size width height都是rem

*{margin:0;padding:0;}
		.box {padding:10rem;}
		.box p{font-size:12rem;line-height: 20rem;}
		.box a{display: block;line-height: 40rem;text-align: center;background-color: #2dcb54;color: #fff; font-size:16rem;margin-top:12rem;}