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>