对css中的长度单位em和rem的理解

ps: 如果有任何问题可以评论留言，我看到后会及时解答，评论或关注，您的鼓励是我分享的最大动力

      转载请注明出处：https://blog.csdn.net/qq_40938301/article/details/87836588

区别

在css中单位长度用的最多的是px、em、rem，这三个的区别是：

px是固定的像素，一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

rem中的r意思是root（根源），这也就不难理解了。

具体解释

既然em和rem都是相对长度单位，那么肯定要有一个长度属性作为相对的参照，而这个长度属性便是 font-size

1、em

em 是相对于父元素的 font-size 的长度

eg：如果父元素div的 font-size 为40px ， 那么子元素p的 font-size = 0.5 em = 0.5 * 40px = 20px ，

       孙元素span的 font-size = 0.5 em = 0.5 * 20px = 10px

<div>
    父元素div
    <p>
        子元素p
        <span>孙元素span</span>
    </p>
</div>

div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}
span {
  font-size: 0.5em;  
  width: 10em;
  height: 10em;
  border: solid 1px blue;
  display: block;
}

2、rem

rem 是相对于根元素即 html 的 font-size 的长度

eg： div 的 font-size = 4 rem = 4*10px = 40px

         p 的 font-size = 2 rem = 2*10px = 20px

html {
    font-size: 10px;
    }
div {
    font-size: 4rem; /* 40px */
    width: 30rem;  /* 300px */
    height: 30rem;
    border: solid 1px black;
}
p {
    font-size: 2rem; /* 20px */
    width: 15rem;
    height: 15rem;
    border: solid 1px red;
}
span {
    font-size: 1.5rem;
    width: 10rem;
    height: 10rem;
    border: solid 1px blue;
    display: block;
} 

3、62.5%

使用 rem 时，多数都是：

.html{font-size:62.5%;}

这是因为任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px。那么12px=0.75rem,10px=0.625rem。为了简化font-size的换算，需要在css中的body选择器中声明 font-size=62.5%，这就使rem值变为 16px*62.5%=10px, 这样12px=1.2rem, 10px=1rem, 也就是说只需要将你的原来的px数值除以10，然后换上rem作为单位就行了。

目的

使用em 或 rem 作为单位，主要是便于 其在移动端的自适应性