源码(公司老哥写的。):
最终可实现:例如宽 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;不受实际窗口宽度变化影响。
剩余没讲解的代码 都比较清晰易懂,大家动手查查吧!