em与rem的区别

article/2025/9/19 5:23:28

在css中px、em、rem，这三个的区别是：

px是固定像素，一旦设置了就无法因为适应页面而改变。
em是rem相对于px更具有灵活性，他们是相对于长度单位的变化而变化，更适应于响应式布局。

em相对于父元素
rem相对于根元素

em的具体解析：

子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话相对于该元素的font-size。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>div {font-size: 40px;width: 10em; /* 400px */height: 10em;background-color: aqua;
}
p {font-size: 0.5em;/* 在div的基础上大小再除以2 */width: 20em; /* 10em表示和font-size同等大小,以此乘除表示放大或缩小几倍 */height: 10em;
background-color: blueviolet;
}
span {font-size: 0.5em;  /* 在p的基础上大小再除以2 */width: 10em;height: 10em;background-color: chartreuse;display: block;
}</style></head><body><div>我是父亲div<p>我是儿子p<span>孙子span</span></p></div></body>
</html>

在这里插入图片描述

rem具体解析：

rem是全部的长度都相当于根元素，根元素是谁？<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位为rem。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>html {font-size: 10px;}div {font-size: 4rem; /* 10px为1rem */width: 40rem;  /* 10px为1rem */height: 40rem;background-color: aquamarine;}p {font-size: 2rem; /* 20px */width: 30rem;height: 30rem;background-color: plum;}span {font-size: 1.5rem;width: 10rem;height: 10rem;background-color: peru;display: block;} </style></head><body><div>我是父亲div<p>我是儿子p<span>孙子span</span></p></div></body>
</html>

在这里插入图片描述
当用rem做响应式时(与Bootstrap搭配食用），直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变。

如果帮到你了，可不可以悄咪咪的给我点个赞ʕ•̀ ω • ʔ