rem和em的区别

rem的含义

rem全称(for size of root element) (根元素字体的大小)
它是一个相对单位，根节点（html）的font-size决定了rem的尺寸单位,1rem就是html文字的大小
相对于父元素的倍数来计算
只在根节点（html)上生效, 给其他元素添加px单位无效(包括自己)

rem的适用场景

移动端的适配: flex + rem单位做适配效果（比如淘宝和小米移动端）当前市场较多

具体案例代码如下:

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* html标签 */
    html {
     /* 此时设置1rem为12px */
      font-size: 12px;
    }

    .box {
      /* 谷歌浏览器默认的文字大小是 16像素 */
      
      /* 宽度就是12px*10=120px */
      width: 10rem;
      
      /* 宽度就是12px*10=120px */
      height: 10rem;
      background-color: pink;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>

它最终会显示为一个120px*120px的pink色盒子

em的含义

em是相对于父元素或者自身元素的字体大小而变化的

具体案例代码如下:

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father {
      font-size: 18px;
    }

    .son {
      width: 10em;
      /* 宽度就是18px*10=180px */
      height: 10em;
      /* 高度就是18px*10=180px */
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="father">
    <div class="son">
    </div>
  </div>
</body>

</html>

它最终会显示为一个180px*180px的pink色盒子

rem与em比较

em相比rem有局限性，因为em只能相对父级或者自身文字大小变化，而rem是相对于根元素大小变化的。