区别css单位px、em、rem

article/2025/9/29 4:37:54

在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将px转换为em或者rem，下面就上述三者之间的联系进行讲解：

em与px转换

一般浏览器默认1em=16px，通过设置font-size大小来代表如：16px*0.625=10px，其则代表1em=10px，直接上代码(注释的样式为浏览器默认 （1em=16px）的长宽)：

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>Title</title><style>body{font-size: 16px;}/*1em=10px*//*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/#div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}/*#div2{width:200px;height:200px;margin:0 auto;}*/#div2{width:12.5em;height:12.5em;margin:0 auto;}/*#div3{width:480px;height:320px;margin:80px auto;}*/#div3{width:30em;height:20em;margin:5em auto;}</style>
</head>
<body>
<div id="div1" style="background:lightslategray;"><div id="div2" style="background: darkseagreen;"></div>
</div>
<div id="div3" style="background: deepskyblue;"></div>
</body>
</html>

结果如图所示：
在这里插入图片描述
在进行转换之前，我们一定要查看浏览器默认字体（最小）大小，如chrome浏览器，默认字体最小为12px，所以即使我们为了方便设置1em=10px，其浏览器仍旧以1em=12px计算。
16px*0.75=12px=1em

 body{font-size: 12px;}或者{font-size: 75%;}

结果如图所示：
在这里插入图片描述

em与rem区别

rem与px，和em与px转换是一样的，二者区别在于前者默认从根元素继承，后者从父级元素继承，还是上述代码，html我们不设置font-size，其默认为16px，上代码展示（div3单位我们修改为rem）：

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>Title</title><style>body{font-size: 12px;}/*1em=10px*//*#div1{width:640px;height:320px;margin:160px auto;padding-top:160px;}*/#div1{width:40em;height:20em;margin:10em auto;padding-top:10em;}/*#div2{width:200px;height:200px;margin:0 auto;}*/#div2{width:12.5em;height:12.5em;margin:0 auto;}/*#div3{width:480px;height:320px;margin:80px auto;}*/#div3{width:30rem;height:20rem;margin:5rem auto;}</style>
</head>
<body>
<div id="div1" style="background:lightslategray;"><div id="div2" style="background: darkseagreen;"></div>
</div>
<div id="div3" style="background: deepskyblue;"></div>
</body>
</html>