CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)

news2025/2/27 20:47:14

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

像素(Pixel)

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

百分比(%)

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

EM&REM

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

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

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

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

html{
    font-size: 62.5%;
}

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

这里需要注意一点，虽然在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，实际显示的字体大小会不同。

<!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>