当前位置: article > 正文

px和em和rem的关系以及换算_em 单位的转换过程

作者：繁依Fanyi0 | 2024-02-17 01:32:58

踩

em 单位的转换过程

传统页面元素之间度量单位一般以 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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/98727