CSS中的常见单位（px,%,em,rem,vw,vh)_calc(100vh - 0.5rem - 0.39rem - 0.21rem

本文链接：https://blog.youkuaiyun.com/just4you/article/details/121062354

本文详细介绍了前端开发中常用的尺寸单位，包括像素、百分比、REM、EM、VW和VH。重点讲解了它们的概念、应用场景以及相互之间的关系。特别是REM和EM的区别，以及在复杂布局中可能遇到的问题。同时提到了VW和VH作为视窗尺寸的相对单位，以及vmax和vmin的使用。在实际开发中，建议避免使用EM，因为其计算复杂，而REM和CSS calc()函数可以简化计算和书写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

像素(px)&百分比(%)

像素(Pixel)

长度单位，相对于显示器屏幕分辨率而言，通常在不定义显示缩放比例的情况下，1px对应显示器屏幕上的一个像素点。
早年的pc端展示的页面基本都用这个单位。

百分比(%)

相对长度单位，指占用的父元素宽度/高度的比例。

当指定为100%时，会占据父元素的全部宽度或高度；
也可以指定大于100%的数值，这时，子元素会超出父元素的边界。

EM&REM

这两个都是相对长度单位。区别在于：

EM是相对于父元素
REM是相对于根元素。REM中的“R”就是ROOT的意思。页面中的根元素是指html标签。

现代浏览器通常默认字体大小是16px，所以rem/em的数值实际上都是16px的倍数。例如，当字体大小为16px时，有：

rem	em
1rem, 1x16=16px	1em, 1x16=16px
2rem, 2x16=32px	2em, 2x16=32px
0.75rem, 0.75x16=12px	0.75em, 0.75x16=12px
0.625rem, 0.625x16=10px	0.625em, 0.625x16=10px

问题在于，当使用16px做为默认大小时，12px或10px这种数值使用rem/em来表示，会在计算和书写时比较麻烦。所以通常会在css的html选择器中将字体大小进行重置。

html{
    font-size: 62.5%;
}

也就是说现在默认字体大小不再是16px，而是16px*0.625=10px。这时，在使用rem/em时，就方便多了。此时的12px就是1.2rem, 10px就是1rem，计算和书写更加方便。

rem	em
1rem, 1x10=10px	1em, 1x10=10px
2rem, 2x10=20px	2em, 2x10=20px
1.2rem, 1.2x10=12px	1.2em, 1.2x10=12px

这里需要注意一点，虽然在html选择器和其他选择器中都定义了font-size属性，但是要注意区别

html {
    # 这里是重新设置根字体大小，其含义是16px*62.5%=10px，也就是说将根字体大小设置为10px;
    font-size: 62.5%;
}
.parent {
    # 这里是应用根设置的字体大小，20rem = 10px*20 = 200px
    width: 20rem;
    height: 20rem;
    # 指定字体大小是20px
    font-size: 2rem;
}

EM的缺点

前面提到，EM是相对于父元素进行计算，所以当页面比较复杂时，计算EM，也就会变的复杂。

究其原因，是因为其所有字体大小都相对于父元素的大小决定的，当页面有多层嵌套时，同样是定义2rem/2em，实际显示的字体大小会不同。

根元素	一级子元素	二级子元素	三级子元素
10px	2em(20px)	2em(40px)	2em(80px)
10px	2rem(20px)	2rem(20px)	2rem(20px)

<!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>Document</title>
    <style>
      html {
        font-size: 62.5%;
      }
      .parent {
        width: 600px;
        height: 600px;
        background-color: lightblue;
      }
      .item_em_1,
      .item_em_2 {
        font-size: 2em;
        background-color: limegreen;
      }
      .item_rem_1,
      .item_rem_2 {
        font-size: 2rem;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="item_em_1">
        EM_AA（这里EM与REM自动大小相同）
        <div class="item_em_2">EM_BB（这里字体相对父元素明显变大）</div>
      </div>

      <div class="item_rem_1">
        REM_AA
        <div class="item_rem_2">REM_BB（这里字体与父元素相同）</div>
      </div>
    </div>
  </body>
</html>