css相对单位 rem 和 em 的最佳实践

最新推荐文章于 2024-01-17 12:56:25 发布

朝阳39

最新推荐文章于 2024-01-17 12:56:25 发布

阅读量257

点赞数

分类专栏： # CSS # 已归档链接文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_41192489/article/details/126118830

版权

已归档链接同时被 2 个专栏收录

283 篇文章 14 订阅

订阅专栏

CSS

149 篇文章 9 订阅

订阅专栏

rem 相对于根元素进行计算，若根元素的 font-size为16px，则其他元素的2rem的大小为 2*16 = 32px 。（根元素是指没有父节点的 dom 节点，在html中是html标签）
em相对于最近的父元素进行计算，若父元素的 font-size为16px，则子元素2em的大小为 2*16 = 32px

演示范例如下：

在这里插入图片描述

直观效果为：rem 只和根元素有关，不会因嵌套而层层放大。而 em 因和父元素有关，嵌套越深，放大倍数越多。

<!DOCTYPE html>
<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>rem和em效果演示</title>
  </head>
  <body>
    <div class="mainBox">
      <p>根元素的font-size为20px</p>

      <div class="box1">
        <p>box1的font-size为2rem的效果为40px</p>

        <div>
          <p class="child">box1的子元素2rem的效果仍为40px</p>
        </div>
      </div>

      <div class="box2">
        <p>box2的font-size为2em效果为40px</p>

        <div>
          <p class="child">box2的子元素2em的效果为80px</p>
        </div>
      </div>

      <div class="box3">
        <p>box3的font-size为12px</p>

        <div>
          <p class="child">box3的子元素2em的效果为24px</p>
        </div>
      </div>
    </div>
    <style>
      .mainBox {
        display: flex;
      }
      div {
        border: 1px solid;
      }
      html {
        font-size: 20px;
      }
      .box1 {
        font-size: 2rem;
      }
      .box1 .child {
        font-size: 2rem;
      }

      .box2 {
        font-size: 2em;
      }
      .box2 .child {
        font-size: 2em;
      }

      .box3 {
        font-size: 12px;
      }
      .box3 .child {
        font-size: 2em;
      }
    </style>
  </body>
</html>