永远不应该在CSS中使用px来设置字体大小( 二 ) _CSS

另一方面，em是当前元素的字体大小。看下面的CSS：
.container {font-size: 200%;}p {font-size: 1em;}考虑到上述 CSS， .container? 元素内的段落将会变成原来的两倍大小。这是因为 1em? 表示“当前字体大小”，在 .container? 内，它是200% 。1em × 200% = 2em? （默认为 32px ）。
然而， .container ?元素外的段落仍将是 1em? 的正常字体大小（默认为 16px ）。
如果我们在上面的CSS中将 em? 更改为 rem ，那么所有段落标签的字体大小将始终是浏览器的默认大小，无论它们在哪里。
font-size: 1em 等同于 font-size: 100%。em 和 % 单位在其他情况下并不总是等价的；例如， width: 1em? 和 width: 100%? 很可能会非常不同，因为此时百分比是基于父容器的宽度而不是其字体大小。但是，就 font-size 属性而言， %? 和 em 是相同的。
总结一下：

1em 是当前元素的字体大小。
1rem （根em）是文档的字体大小（即浏览器的字体大小）。

好的，那就是单位的含义和来源。现在让我们回答为什么使用哪个单位很重要。
为什么这一切都很重要再次强调的误解是：既然 1em? 和 16px? 相等，那么选择哪个单位并不重要。这似乎是合理的；如果 16px = 1rem ，那么选择哪种方式输入似乎并不重要。
记住， em? 和 rem 是相对的；默认情况下，它们都（最终）基于浏览器的字体大小。
2rem? 是浏览器字体大小的两倍；0.5rem? 是其一半，依此类推。因此，如果用户更改其首选字体大小，如果使用 em? 和 rem? ，则网站上的所有文本都会相应更改，就像应该的那样。2rem ?仍然是该字体大小的两倍；0.5rem 仍然是其一半。
相比之下， px? 值是静态的。无论容器、浏览器或用户的字体大小如何，20px? 只是 20px 。当设置静态像素值时，无论用户的字体偏好大小如何，它都会覆盖该选择并使用指定的确切值。
批判性地说，这意味着如果你的样式表使用 px? 在任何地方设置 font-size ，那么基于该值的任何文本都将无法由用户更改。
那是非常糟糕的事情。它是不可访问的，甚至可能会阻止某人完全使用该网站。
因此，虽然可能存在一些有效的用例来解释这种行为，但它绝对不是你想要的默认行为。

这也是避免使用视口单位（如 vw 或 vh ）设置字体大小的非常好的理由。它们也是静态的，用户无法覆盖。最多，像 calc(1rem + 1vw)? 这样的值可能是可以接受的，因为它仍然包含 rem? 作为基础。即便如此，我仍建议使用 clamp() 或媒体查询来设置最小和最大值，因为屏幕尺寸往往远远超出我们所期望或测试的范围。

超出字体大小的差异好的，现在让我们谈谈当我们不特别处理 font-size? 属性时， px? 和 em / rem 如何变化。
开发人员通常通过缩放页面来进行测试，我认为这就是本文中心误解的来源。当你缩放时，所有内容都会被缩放（放大或缩小），在这种情况下，选择 px? 或 em? / rem 作为你的CSS单位通常并不重要。就缩放而言，两者的行为方式相同。而且，大多数视力良好的开发人员可能不会意识到其中还有更多内容。然而，棘手的问题是：
即使超出 font-size? ， px? 的行为也与 em? 和 rem 不同。
px? 单位仍然与屏幕上像素的缩放值相关联。em? 和 rem 与文档的字体大小相关联，而不是页面的缩放或比例。
为了演示，请看这个 CodePen：
https://codepen.io/collinsworth/pen/WNyvvqY

HTML CSSResult Skip Results IframeEDIT ON<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam eum aliquam eveniet.</p><p>Sapiente delectus in ab excepturi, commodi placeat quaerat saepe voluptas sunt numquam.</p><p>Rerum veniam, quidem voluptatibus deleniti nihil consequatur blanditiis explicabo eum quos. Nam.</p><p>Natus necessitatibus delectus neque t.NETur sint illum obcaecati similique sequi doloribus eligendi?</p><p>Eos quidem iure debitis dolorum repellendus ab incidunt ipsam suscipit, autem consequuntur?</p>