首先介紹下rem
說起rem就的說px，em；
PX為單位
在Web頁面初期制作中，我們都是使用“px”來設置我們的文本，因為他比較穩定和精確。但是這種方法存在一個問題，當用戶在瀏覽器中瀏覽我們制作的Web頁面時，他改變了瀏覽器的字體大小，這時會使用我們的Web頁面布局被打破。這樣對於那些關心自己網站可用性的用戶來說，就是一個大問題了。因此，這時就提出了使用“em”來定義Web頁面的字體。
em為單位 font size of the element
前面也說了，使用是“px”為單位是比較方便，而又一致，但在瀏覽器中放大或縮放瀏覽頁面時會存在一個問題，要解決這個問題，我們可以使用“em”單位。Richard Rutter'在《How to size text using ems》一文中有做過詳細的介紹，追至早一點，Richard Rutter也在《How to Size Text in CSS》中進行過深入的剖析。
這種技術需要一個參考點，一般都是以<body>的“font-size”為基准。比如說我們使用“1em”等於“10px”來改變默認值“1em=16px”，這樣一來，我們設置字體大小相當於“14px”時，只需要將其值設置為“1.4em”。
1 body { 2 font - size: 62.5 % ; /*10 ÷ 16 × 100% = 62.5%*/ 3 } 4 h1 { 5 font - size: 2.4e m; /*2.4em × 10 = 24px */ 6 } 7 p { 8 font - size: 1.4e m; /*1.4em × 10 = 14px */ 9 } 10 li { 11 font - size: 1.4e m; /*1.4 × ? = 14px ? */ 12 }
為什么“li”的“1.4em”是不是“14px”將是一個問號呢？如果你了解過“em”后，你會覺得這個問題是多問的。前面也簡單的介紹過一回，在使用“em”作單位時，一定需要知道其父元素的設置，因為“em”就是一個相對值，而且是一個相對於父元素的值，其真正的計算公式是：
所以em：1 ÷ 父元素的font-size × 需要轉換的像素值 = em值
這樣的情況下“1.4em”可以是“14px”,也可以是“20px”，或者說是“24px”，總之是一個不確定值，那么解決這樣的問題，要么你知道其父元素的值，要么呢在任何子元素中都使用“1em”。這樣一來可能又不是我們所需要的方法。
Rem為單位 font size of the root element
CSS3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。
我們來看一個簡單的代碼實例：
1 html { font - size: 62.5 % ; /*10 ÷ 16 × 100% = 62.5%*/ } 2 body { font - size: 1.4 rem; /*1.4 × 10px = 14px */ } 3 h1 { font - size: 2.4 rem; /*2.4 × 10px = 24px*/ }
我在根元素<html>中定義了一個基本字體大小為62.5%（也就是10px。設置這個值主要方便計算，如果沒有設置，將是以“16px”為基准 ）。從上面的計算結果，我們使用“rem”就像使用“px”一樣的方便，而且同時解決了“px”和“em”兩者不同之處。
那么在rem的計算上，我們可以用：
1 html { 2 font - size: 20 px; 3 } 4 @media only screen and(min - width: 401 px) { 5 html { 6 font - size: 25 px!important; 7 } 8 } 9 @media only screen and(min - width: 428 px) { 10 html { 11 font - size: 26.75 px!important; 12 } 13 } 14 @media only screen and(min - width: 481 px) { 15 html { 16 font - size: 30 px!important; 17 } 18 } 19 @media only screen and(min - width: 569 px) { 20 html { 21 font - size: 35 px!important; 22 } 23 } 24 @media only screen and(min - width: 641 px) { 25 html { 26 font - size: 40 px!important; 27 } 28 }
也可以
; (function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var tid; var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) { //將根據已有的meta標簽來設置縮放比例 var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if (flexibleEl) { var content = flexibleEl.getAttribute('content'); if (content) { var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if (maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } } } if (!dpr && !scale) { var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下，對於2和3的屏，用2倍的方案，其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { dpr = 2; } else { dpr = 1; } } else { // 其他設備下，仍舊使用1倍的方案 dpr = 1; } scale = 1 / dpr; } docEl.setAttribute('data-dpr', dpr); if (!metaEl) { metaEl = doc.createElement('meta'); metaEl.setAttribute('name', 'viewport'); metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else { var wrap = doc.createElement('div'); wrap.appendChild(metaEl); doc.write(wrap.innerHTML); } } function refreshRem() { var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem; } win.addEventListener('resize', function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }, false); win.addEventListener('pageshow', function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); } }, false); if (doc.readyState === 'complete') { doc.body.style.fontSize = 12 * dpr + 'px'; } else { doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize = 12 * dpr + 'px'; }, false); } refreshRem(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = refreshRem; flexible.rem2px = function(d) { var val = parseFloat(d) * this.rem; if (typeof d === 'string' && d.match(/rem$/)) { val += 'px'; } return val; } flexible.px2rem = function(d) { var val = parseFloat(d) / this.rem; if (typeof d === 'string' && d.match(/px$/)) { val += 'rem'; } return val; } })(window, window['lib'] || (window['lib'] = {}));
參考：
https://isux.tencent.com/web-app-rem.html
http://www.jb51.net/article/94748.htm
http://www.w3cplus.com/css3/define-font-size-with-css3-rem