rem、em 与 px 的区别：CSS 单位、百分比、vw 和 vh

用一个嵌套示例看懂 rem 和 em

rem 相对于根元素的字号（即 <html> 元素，默认 16px）。em 相对于当前字号，对 font-size 来说就是父元素的字号。把同一个类嵌套三层，区别就显现出来了：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rem vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .em  { font-size: 1.25em;  border-inline-start: 4px solid #f59e0b; padding-inline-start: 8px; }
    .rem { font-size: 1.25rem; border-inline-start: 4px solid #2563eb; padding-inline-start: 8px; }
  </style>
</head>
<body>
  <div class="em">em <div class="em">em <div class="em">em</div></div></div>
  <div class="rem">rem <div class="rem">rem <div class="rem">rem</div></div></div>
  <p id="out"></p>
  <script>
    const sizes = (cls) => [...document.querySelectorAll('.' + cls)].map((el) => getComputedStyle(el).fontSize).join(', ');
    document.getElementById('out').textContent = 'em: ' + sizes('em') + '  |  rem: ' + sizes('rem');
  </script>
</body>
</html>

打印出来的尺寸是浏览器计算得到的结果。每个 1.25em 都会乘以父元素的字号：20px、25px、31.25px。每个 1.25rem 只看根元素：20px、20px、20px。正是这种层层叠加，让 em 字号在嵌套的列表和菜单中失控，这也是大多数网站用 rem 设置字号的原因。

每种单位相对于什么

CSS 像素不是设备像素：在 3 倍屏的手机上，1px 有 3 个设备像素宽。它在不同屏幕上的视觉大小大致相同，所以边框和阴影用 px 仍然没问题。

用 em 设置随文字缩放的间距

em 不只用于字号。用在 padding、margin、width 或 border-radius 上时，它的意思是“这个元素字号的多少倍”。这样一个按钮类就能适用于任何尺寸：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>em padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .btn {
      padding: 0.5em 1em;   /* scales with this button's own font size */
      border-radius: 0.4em;
      border: 0;
      background: #2563eb;
      color: white;
      margin: 4px;
    }
    .small { font-size: 0.75rem; }
    .large { font-size: 1.5rem; }
  </style>
</head>
<body>
  <button class="btn small">Small</button>
  <button class="btn">Normal</button>
  <button class="btn large">Large</button>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.btn')]
      .map((b) => b.textContent + ': font ' + getComputedStyle(b).fontSize + ', padding ' + getComputedStyle(b).paddingTop + ' ' + getComputedStyle(b).paddingLeft)
      .join('  |  ');
  </script>
</body>
</html>

每个按钮的垂直内边距是字号的一半，水平内边距等于一个字号，所以三个按钮看起来就是同一个按钮的三种尺寸。如果用 px 设置内边距，每种尺寸都得单独写一条内边距规则。

注意，按钮默认不会继承页面的字号（浏览器给表单控件设置了自己的字号），所以这里中间的按钮在 Chrome 中是 13.33px，而不是 16px。想让按钮和输入框与页面一致时，给它们加上 font: inherit。

百分比：取决于属性

% 没有统一的含义。每个属性各自规定它是谁的百分比：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent { width: 400px; background: #e5e7eb; padding: 8px 0; }
    .child { width: 50%; height: 50%; padding-top: 5%; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c">child</div></div>
  <p id="out"></p>
  <script>
    const s = getComputedStyle(document.getElementById('c'));
    const r = document.getElementById('c').getBoundingClientRect();
    document.getElementById('out').textContent =
      'width ' + s.width + ', padding-top ' + s.paddingTop + ', rendered height ' + Math.round(r.height) + 'px';
  </script>
</body>
</html>

width: 50% 是 200px，即父元素的一半。padding-top: 5% 是 20px：父元素宽度的 5%，而不是高度的 5%。而 height: 50% 不起作用，因为父元素没有设置高度，所以子元素的高度只等于它的文字加上那段内边距。宽度和高度页面详细讲解了这条规则。

vw、vh 与手机地址栏

1vw 是视口宽度的 1%，1vh 是视口高度的 1%。它们适合用来做全屏区块和流式尺寸（常放在 clamp() 里）。在手机上，vh 有个坑：滚动时浏览器的地址栏会滑入滑出，而 100vh 是不含地址栏时的高度，所以地址栏显示时，height: 100vh 的首屏区块底部会被截掉。较新的单位解决了这个问题：

.hero {
  min-height: 100vh;  /* fallback for older browsers */
  min-height: 100svh; /* fits the screen even with the address bar visible */
}

vw 也有自己的坑：当垂直滚动条占据空间时（比如在 Windows 上），100vw 包含滚动条的宽度，所以 width: 100vw 可能比页面更宽，从而出现水平滚动条。要表示“父元素的完整宽度”，请用 width: 100%。

用 ch 控制易读的行长

ch 是字符“0”的宽度，所以 max-width: 65ch 能把段落限制在每行大约 65 个字符，无论字号多大，都是舒适的阅读长度：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ch</title>
  <style>
    body { font-family: Georgia, serif; }
    p { max-width: 40ch; background: #f3f4f6; padding: 8px; }
    .big { font-size: 1.4rem; }
  </style>
</head>
<body>
  <p>This paragraph is limited to 40ch, about forty characters per line, however wide the page is.</p>
  <p class="big">At a bigger font size the box widens with the text, so each line still holds about forty characters.</p>
</body>
</html>

该用哪种单位

为什么 rem 尊重读者而 px 不尊重

浏览器有一个默认字号设置，需要更大文字的人会用到它。它会改变根元素的字号，所以所有用 rem 和 em 设置的内容都会随之变大。而 font-size: 14px 无论读者选了什么都保持 14px。浏览器缩放也会缩放 px，但很多读者依赖的是字号设置。这就是用 rem 设置字号的主要原因。

有些网站会设置 html { font-size: 62.5%; }，让 1rem 等于 10px，方便计算。它仍然尊重读者的设置（读者所选字号的 62.5%），但记得在 body 上设置一个易读的 font-size，否则所有没有单独设置字号的元素都会显示 10px 的文字。

常见错误

• 在嵌套元素中用 em 设置字号。它会在每一层相乘。字号请用 rem。
• height: 50% 不起作用。父元素需要设置高度，百分比高度才会生效。
• 以为 padding-top: 10% 跟随父元素的高度。垂直方向的内边距和外边距百分比使用的是父元素的宽度。
• width: 100vw 导致出现水平滚动条。它包含了滚动条的宽度。改用 100%。
• height: 100vh 在手机上被截断。改用 100svh 或 100dvh。
• 设置 html { font-size: 12px }。根元素上的 px 值会覆盖读者对整个页面的字号设置。不要改根元素字号，或者使用百分比。