px换算成rem----非常简洁实用，另外附上详细代码解释。

 源码（公司老哥写的。）：

最终可实现：例如宽 20px 的图，就可以写成 0.2rem ； 公式为20px/100=0.2rem；

var rootResize=function(){
                var baseFontSize = 100;
                var baseWidth = 640;
                var minWidth=320;
                var clientWidth = document.documentElement.clientWidth || window.innerWidth;
                var innerWidth = Math.max(Math.min(clientWidth, baseWidth), minWidth);

                var rem = clientWidth/(baseWidth/baseFontSize);
                if(innerWidth==640||innerWidth==320){
                    rem=innerWidth/(baseWidth/baseFontSize)
                }

                document.querySelector('html').style.fontSize = rem + 'px';
            };
rootResize();
window.onresize=function(){rootResize()};

                                不想看逼逼叨的同学可以拿走去用了 。

1. 解析代码：（针对手机端）

• documentElement.clientWidth
• window.innerWidth

先解释下

documentElement： 

返回HTML  DOM中的ROOT节点    即 ；  菜鸟网解释与案例

 

documentElement.clientWidth：

window.innerWidth：

Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

                                                                           图片来源与详细解释点击我！

window.innerWidth：

浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。 点击进入解释出处

我们用代码验证下：

    
    
    



    
显示值
    
显示值
    
显示值
    body
    html
    p

针对手机端， 所以设置

运行结果：

document.documentElement.clientWidth / window.innerWidth;   都是获取的HTML宽度。

document.getElementById("demo3").clientWidth; 当.clientWidth 定位到P标签宽度时,只计算内边距宽度，不计算边框.

 打开 document.body.clientWidth; 当P标签没有外边框的时候 body宽度等于P标签宽度，  body和HTML宽度不相等，相差得数值  就不做深究了。

 

剩下的我就重点说一下clientWidth/(baseWidth/baseFontSize); 这个公式的意义。

首先当把HTML font-size：设置多少。  1rem 就等于 多少；

    
    



显示值
p

大家自己动手改下数值验证一下， 也可以切换模拟器宽度，是不受模拟器宽度影响的。

clientWidth 变量=实际手机窗口宽度。 baseWidth=640px；  baseFontSize=100px；

换个方法大家就一眼看懂了。    640px/100px = 实际手机窗口宽度/ 实际手机HTML:font-size；代码是rem 我用  实际手机HTML:font-size     代替便于大家理解。    等式的意义就是， 当窗口为640PX  font-size设置为100PX 时   1rem=100px  。 那当实际手机窗口宽度为比如：320 时， 那么实际手机的font-size我改设置多少呢。    这个等式最后求出的 实际手机font-size 目的就是按照100PX=1rem这个关系来动态的换算我们的rem；不受实际窗口宽度变化影响。

剩余没讲解的代码 都比较清晰易懂，大家动手查查吧！