浅谈px，em和rem

总：

px是绝对单位，rem和em都是相对单位

分：

1.px是像素单位，1px代表一个像素点，不同的屏幕分辨率下，1px显示的效果可能不同(css中像素是逻辑像素，不等同于物理像素)

2.em是相对于当前元素或与之最近的已经设置了font-size的父级元素的字体大小而言，如果当前元素和父级元素都未设置font-size，则参考根元素字体大小而言(默认16px)

3.rem，拆开来就是root em，也就是相对于根元素的字体大小而言的一个相对单位。是移动端适配的常用布局单位。

以下论证em：

情况一：不设置font-size的情况下，查看元素的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>em</title>
  <style>
    a {
      width: 20em;
    }

    h2 {
      width: 20em;
    }

    p {
      width: 20em;
    }

    input {
      width: 20em;
    }
  </style>
  <!-- 查看当前元素font-size的方法：调试工具->elements->computed->font-size (没找到font-size说明没有设置font-size) -->
</head>

<body>
  <div>
    <ul>
      <li>
        <!-- 行内元素 -->
        <a>em相对于当前或最近父级已经设置font-size的元素字体大小而言</a>
        <!-- 块级元素 -->
        <p>em相对于当前或最近父级已经设置font-size的元素字体大小而言</p>
        <!-- 行内块元素 -->
        <input value="em相对于当前或最近父级已经设置font-size的元素字体大小而言"></input>
        <!-- 带默认字体大小的块级元素 -->
        <h2>em相对于当前或最近父级已经设置font-size的元素字体大小而言</h2>
      </li>
    </ul>
  </div>
</body>

</html>

情况一结论：

（1）a标签，1em等于16px，参考根元素

但是这里有个问题，当我审查元素的时候，发现a标签的宽度，实际上不等于320px 。这是为啥，明明设置了宽度，却好像没有生效。

原因很简单，a是行内元素，行内元素不能设置宽高。

（2）p标签，1em等于16px。参考根元素

当前元素和父级元素没有设置font-size且字体没有自带font-size时，默认参考根元素字体大小

（3）input标签，1em等于13px，参考当前元素

因为input标签默认自带字体大小为13px，所以em参考自身（实际审查元素大于266是因为把padding和boder也算进去了）

（4） h2标签，1em等于24px等于1.5 * 16px，参考当前元素

h2标签自带font-size，所以em参考自身font-size(其实h2的font-size也是参考根元素的，如图所示，font-size为1.5的em，所以实际上width = 20 * 16 * 1.5)

情况二：给当前元素设置font-size，查看元素的em

  <style>
    a {
      width: 20em;
      font-size: 14px !important;
    }

    h2 {
      width: 20em;
      font-size: 14px !important;
    }

    p {
      width: 20em;
      font-size: 14px !important;
    }

    input {
      width: 20em;
      font-size: 14px !important;
    }
  </style>

（1）a标签，1em等于14px，参考当前元素

由于是行内元素，设置宽高依然不生效

（2）p标签，1em等于14px。参考当前元素

（3）input标签，1em等于14px，参考当前元素

同样，border和padding占8px，所以会不等于280px

（4） h2标签，1em等于14px，参考当前元素

情况三：给父级元素设置font-size，查看元素的em

  <style>
    a {
      width: 20em;
    }

    h2 {
      width: 20em;
    }

    p {
      width: 20em;
    }

    input {
      width: 20em;
    }
  </style>    
    <ul style="font-size: 16px;">
      <li style="font-size: 15px;">
        <!-- 行内元素 -->
        <a>em相对于当前或最近父级已经设置font-size的元素字体大小而言</a>
        <!-- 块级元素 -->
        <p>em相对于当前或最近父级已经设置font-size的元素字体大小而言</p>
        <!-- 行内块元素 -->
        <input value="em相对于当前或最近父级已经设置font-size的元素字体大小而言"></input>
        <!-- 带默认字体大小的块级元素 -->
        <h2>em相对于当前或最近父级已经设置font-size的元素字体大小而言</h2>
      </li>
    </ul>

（1）a标签，1em等于15px，参考最近父元素

（2）p标签，1em等于15px。参考最近父元素

（3）input标签，1em等于13.3333px，参考当前元素

当父级和当前元素都设置了font-size的时候，优先参考当前元素的字体大小

（4） h2标签，1em等于22.5px，参考当前元素

这个h2就比较有意思了，虽然它也自带font-size，但是它的font-size并不像input一样是个px死值，而是em。由于我给h2的父元素设置了font-size为15px，所以h2的em参考15px，即font-size为15*1.5=22.5px，因此width = 20em = 20 * 22.5 = 450px

特殊情况：设置的font-size小于浏览器最小字体大小时

    <ul style="font-size: 16px;">
      <li style="font-size: 10px;">
        <!-- 行内元素 -->
        <a>em相对于当前或最近父级已经设置font-size的元素字体大小而言</a>
        <!-- 块级元素 -->
        <p>em相对于当前或最近父级已经设置font-size的元素字体大小而言</p>
        <!-- 行内块元素 -->
        <input value="em相对于当前或最近父级已经设置font-size的元素字体大小而言"></input>
        <!-- 带默认字体大小的块级元素 -->
        <h2>em相对于当前或最近父级已经设置font-size的元素字体大小而言</h2>
      </li>
    </ul>

（1）a标签，1em等于10px，参考最近父元素

虽然调试工具中查看a标签font-size是12px，且页面上显示大小也为12px，但em还是参考我们手动设置的10px为准

（2）p标签，1em等于10px。参考最近父元素

同a标签，在本身未设置font-size时，参考最近父元素的font-size，哪怕父元素设置的font-size小于浏览器最小字体大小12px，也要以父元素的为准（不过显示在浏览器中的效果仍然以12px为准）

（3）input标签，1em等于13.3333px，参考当前元素

input还是老样子，以自身默认的字体大小为准

（4） h2标签，1em等于15px，参考当前元素

h2是个很有意思的标签，首先它自带有一个font-size，而这个font-size是一个相对单位em，为1.5em，如果父级元素没有设置font-size，那么这个1.5em默认为1.5*16 = 24px。但我这里设置了父级元素为10px，所以1.5em = 15px，故width = 20 em = 20 * 15px = 300px

小结一下：

px是绝对单位，代表逻辑像素，与电脑的显示器分辨率有关，不同电脑上的1px呈现效果可能不一样。
em是相对单位，相对于已有font-size的当前元素或最近的父级元素而言。如果都没有设置font-size，则相对于root(根元素)而言，此时em和rem其实是一样的。
rem是相对单位，相对于根标签的字体大小而言。使用rem可以更好的进行移动端页面适配。

参考文献：

CSS 中的像素(px)_居十四的博客

设备像素比（devicePixelRatio）

移动端开发-为什么需要“（二倍图，三倍图，四倍图）图解”

猜你喜欢