对于现在不同尺寸的移动端屏幕，如果设置px来说实在有点影响用户体验，在小屏幕上太大，大屏幕上太小，不能实现响应式，所以就引进了rem的概念。
rem是相对于根元素<html>
在我的项目中就是用这样的一段js代码。
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1, user-scalable=no" />
将上面代码拷在html的head里，意思是可视区域的宽度等于设备的宽带，禁止缩放，最大缩放为1，最小也是1，默认比例是1.
1 (function (doc, win) { 2 var docEl = doc.documentElement, 3 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', 4 recalc = function () { 5 var clientWidth = docEl.clientWidth; 6 if (!clientWidth) return; 7 docEl.style.fontSize = 100 * (clientWidth / 320) + 'px'; 8 }; 9 10 // Abort if browser does not support addEventListener 11 if (!doc.addEventListener) return; 12 win.addEventListener(resizeEvt, recalc, false); 13 doc.addEventListener('DOMContentLoaded', recalc, false); 14 })(document, window);
当设计给我psd时，测量文字为40px，html使用rem值40px/100 = 0.4rem。
rem其实不单只能使用在文字的单位，还可以用于height，width，padding，marigin,line-height等的单位。