前端常用单位：em和rem简单介绍_前端em

作者：很楠不爱3 | 2024-02-10 14:40:22

踩

前端em

em（容易出错）

相对于父级元素的font-size计算而来

本级元素字体大小（单位为px）=父级元素的字体大小（转化为px） * 本级元素em的值

例如：

父级元素：20px，

子级元素的1em相当于20px

若父级元素的单位也是em，则一层层往上找，直到找到单位为px的元素。

例如：

父级元素的font-size为0.8em，父级元素的上一级元素的font-size为20px

则父级元素的font-size为0.8*20=16px。

则子级元素的1em相当于16px

因为这个特性，多级嵌套的元素若是其中几层的单位时em，元素的字体大小计算就会容易出错

例子

在这里插入图片描述

<html lang="en">
  <head>
    <style>
      #div1 {
        font-size: 20px;
      }
      #div2 {
        font-size: 0.8em;
      }
      #div3 {
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <div id="div1">
      <!--(font-size为20px)-->
      AAAAAAAAAA
      <div id="div3">
        <!--(font-size为20*0.8=16px)-->
        BBBBBBBBBB
        <div id="div2">
          <!--(font-size为16*2=32px)-->
          CCCCCCCCCC
          <div id="div3">
            <!--(font-size为32*2=64px)-->
            DDDDDDDDDD
            <div id="div2">
              <!--(font-size为64*0.8=51.2px)-->
              EEEEEEEEEE
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

rem（推荐）

相对于html根元素的font-size计算而来

因为所有单位是rem单位的元素的基础值都是同一个，所以计算比较方便，也不会出现em单位的那种嵌套问题

响应式页面使用

因为em取决于html根元素的font-size大小

只需要重新设置html的font-size大小，所有单位为em的元素都会自动缩放或者放大

所以rem单位非常适合响应式页面使用

例子

在这里插入图片描述

<!--
	div的宽高为10rem，设置定时器，每隔0.5秒重新设置html的font-size
	页面自动放大/缩小
-->
<html lang="en">
  <head>
    <style>
      div {
        width: 10rem;
        height: 10rem;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
<script>
  let count = 1
  setInterval((e) => {
    document.documentElement.style.fontSize = count * 16 + 'px'
    count++
    if (count == 5) {
      count = 1
    }
  }, 500)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

常用技巧

html元素的字体大小默认是16px，以此为基准计算比较麻烦，所以一般会做如下操作:

<style>
    html{
        //默认为16px，设置为62.5%，html的font-size就变成了16*62.5=10px
        //以此为基准比较好计算
        font-size:62.5%
    }
</style>
1
2
3
4
5
6
7

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/74572?site