彻底弄懂css中单位px和em,rem的区别

如题所述

px 像素单位,打开photoshop软件 打开一张图,放大到不能放大 ,最后会看到类似马赛克,一格就是1像素。是很直观的单位,就像厘米、千克一样。相对分辨率

em和rem 比较类似

em基于父节点的尺寸,如果未设置则往上找  而rem基于 html/body 的尺寸

<div><p></p></div>
<style>
    html,body{font-size:18px}
    div{font-size:20px}
    p{font-size:1em;}
</style>

这种时候p的1em 找的就是父节点 div 的尺寸  20*1 px

<div><p></p></div>
<style>
   html,body{font-size:18px}
   div{font-size:20px}
   p{font-size:1rem;}
</style>

这种时候p的1rem 找的就是html节点 的尺寸  18*1 px

建议用 rem 不会混乱

温馨提示:内容为网友见解,仅供参考
无其他回答
相似回答