px和em和rem的關係以及換算
阿新 • • 發佈：2018-12-23
傳統頁面元素之間度量單位一般以 px 螢幕畫素作為單位，但是並非所有的頁面畫素都是恆定的，比如移動裝置就包含320px、375px、425px。。。不可能使用畫素為每套裝置設計一個頁面，當然你說可以用百分比來設計，你願意去計算每個元素的百分比我也不反對。em也有類似的通病，它是個相對於父級font-size的相對單位，設定em就必須知道父級元素的font-size。這時rem就產生了，rem相對於html的font-size作為參照單位。
預設1em=1rem=16px
參照值(C=16)
指定參照的font-size的值
font-size=10px
參照值(C=10)
換算方法：設X為當前px的值，Y為em/rem的值
(Y)em / (1)em = (X)px / (C)px => 求em ：Y=X/C 或 求px：X=C*Y
(Y)rem / (1)rem = (X)px / (C)px => 求rem：Y=X/C 或 求px：X=C*Y所以px和em和rem換算如下:
例:
<body style=""> <style> html{ font-size:20px; } </style> <div style="width:5rem;height:5rem;font-size:5rem;background:green"> <!--這div寬將是100px X=C*Y=20px*5rem=100px--> <div style="width:.5em;height:.5em;background:black"> <!--這div寬將是 X=C*Y=100px*0.5em=50px--> </div> </div> </body>