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.οnresize=function(){rootResize()};

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

documentElement.clientWidth
window.innerWidth

先解释下

documentElement：

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

documentElement.clientWidth：

window.innerWidth：

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

window.innerWidth：

浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。

我们用代码验证下：

<html >
<head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<body>
<div style="border: 10px #7f7f7f solid;"><p style="background: #fe9901" id="demo1">显示值</p><p style="background: #d76342" id="demo2">显示值</p><p style="background: #fe9901" id="demo3">显示值</p><button οnclick="Click1()">body</button><button οnclick="Click2()">html</button><button οnclick="Click3()">p</button>
</div>
</body>
<script>// var mybody = document.body.clientWidth;var myhtmlto = document.documentElement.clientWidth;var myhtml = window.innerWidth;var myp = document.getElementById("demo3").clientWidth;/* function Click1 (){var mby=document.getElementById("demo1");mby.innerHTML=mybody+"---document.body.clientWidth;";}*/function Click1 (){var diy=document.getElementById("demo1");diy.innerHTML= myhtmlto+"---document.body.clientWidth;";}function Click2(){var diy =document.getElementById("demo2");diy.innerHTML=myhtml+"---window.innerWidth;";}function Click3(){var diy =document.getElementById("demo3");diy.innerHTML=myp+"---getElementById(\"demo3\").clientWidth;";}
</script>
</html>

针对手机端，所以设置

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

运行结果：

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 就等于多少；

<html>
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>html{font-size: 100px;}
</style>
<body>
<p style="background: #fe9901;width: 1rem;" id="demo3">显示值</p>
<button οnclick="Click3()">p</button>
<script>var myp = document.getElementById("demo3").clientWidth;function Click3(){var diy =document.getElementById("demo3");diy.innerHTML=myp+"px我的宽度";}
</script>
</body>
</html>

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

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；不受实际窗口宽度变化影响。

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