wap js等比例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()};
不想看逼逼叨的同學可以拿走去用了 。
- 解析程式碼：（針對手機端）
- 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；不受實際視窗寬度變化影響。
剩餘沒講解的程式碼 都比較清晰易懂，大家動手查查吧！
金錢給與我肯定， 而我真正快樂的是成長！