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.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；不受實際窗口寬度變化影響。
剩余沒講解的代碼 都比較清晰易懂，大家動手查查吧！
總結
以上是生活随笔為你收集整理的px转rem的详细解释和用法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jackd android 2018,2
- 下一篇： 向前迈进！走入GC世界：G1 GC原理深