做移动端或者响应式的页面必然需要字体的变化的。这次我就自己的经验来说说他们之间的关系，以及怎么用。
px (绝对单位)是我们常用的就不说了。
em（相对单位，相对父级）
em 指字体高，任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。为了简化font -size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
CSS代码
html { font-size: 62.5%; }
这个换算在IE浏览器下不成立，1.2em会比12px稍大一些，解决办法是把html标签样式中的62.5%改成63%，即：
CSS代码
html { font-size: 63%; }
注：（有一点不懂的是）
你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em，但如果p属于content的子级的话，p的字体大小就不是12px，而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em，这个em值继承其父级元素body的大小，也就是16px * 62.5% * 1.2=12px, 而p作为其子级，em则继承content的字体高，也就是12px。所以p的1.2em就不再是12px，而是14.4px。
所以这个用的时候会有点问题
rem（相对单位 ，css3，相对根），在ie8及ie8以下的版本不支持外其他浏览器都支持，如果你要考虑ie8及一下，最好把px也写上。
我们设置html的字体大小的值为html｛font-size: 87.5%;｝（也就是14px）。然后其他的字体就是将你要的值除以14得到的值；
你根元素的字体大小选62.5%，那px和rem之间的换算就是px直接除以10就得到rem了。
这里我就不负责任说一句，这里是看到别人写的，我自己还没哟用过，不知道什么样。
javascript方式，通过上面的公式，计算出基准值rem，然后写入样式，大概如下(代码参考自kimi的m-base模块)
var dpr, rem, scale;var docEl = document.documentElement;var fontEl = document.createElement('style');var metaEl = document.querySelector('meta[name="viewport"]');scale = 1 / dpr;dpr = win.devicePixelRatio || 1;rem = docEl.clientWidth * dpr / 10;// 设置viewport，进行缩放，达到高清效果metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ', initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');// 设置data-dpr属性，留作的css hack之用docEl.setAttribute('data-dpr', dpr);// 动态写入样式docEl.firstElementChild.appendChild(fontEl);fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';// 给js调用的，某一dpr下rem和px之间的转换函数window.rem2px = function(v) { v = parseFloat(v); return v * rem;};window.px2rem: function(v) { v = parseFloat(v); return v / rem;};window.dpr = dpr;window.rem = rem;这种方式，可以精确地算出不同屏幕所应有的rem基准值，缺点就是要加载这么一段js代码，但个人觉得是这是目前最好的方案了。
因为这个方案同时解决了三个问题：
1）border: 1px问题
2）图片高清问题
3）屏幕适配布局问题
推荐网页：http://www.cocoachina.com/webapp/20150715/12585.html