传统页面元素之间度量单位一般以 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>
4068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
