px ,em ,rem

做移动端或者响应式的页面必然需要字体的变化的。这次我就自己的经验来说说他们之间的关系，以及怎么用。

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