源码（公司老哥写的。）：
最终可实现：例如宽 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()};
不想看逼逼叨的同学可以拿走去用了 。
- 解析代码：（针对手机端）
- documentElement.clientWidth
- window.innerWidth
先解释下
documentElement：
返回HTML DOM中的ROOT节点 即<html> ； 菜鸟网解释与案例
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 onclick="Click1()">body</button>
<button onclick="Click2()">html</button>
<button onclick="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 onclick="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；不受实际窗口宽度变化影响。
剩余没讲解的代码 都比较清晰易懂，大家动手查查吧！