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

在Josh Collinsworth的博客文章“永远不要用px作为字体大小”中，作者讨论了为什么不应该使用像素（px）作为网页字体大小的单位[1] 。作者指出，相对于容器、浏览器或用户的字体大小，px值是静态的。无论用户的字体偏好设置如何，当您以静态像素设置值时，它将覆盖用户的选择，以您指定的确切值替代。这意味着，如果您的样式表使用像素单位，可能导致访问您网站的用户难以阅读。
因此，作者建议使用相对单位，如em、rem或百分比，而不是像素。这些单位是基于用户的字体大小偏好设置进行缩放的，从而提供了更好的可访问性和可读性。尤其是在设计响应式网站时，相对单位能够提高跨设备的兼容性。通过使用相对单位，设计师可以确保网站在不同设备和浏览器中以合适的字体大小显示[1] 。
下面是正文：
在 Web 开发领域中，有很多误解流传，即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。css Tricks 在将近十年前就对此进行了详细的解释（简而言之：大多数情况下是错误的），但它似乎仍然在某些角落中存在。
案例证明：在CSS中， px? ， em? 或 rem 单位之间没有功能上的区别的想法是一个我一遍又一遍听到的误解，因此我想在这里发帖来解决这个问题。
我们要非常清楚：在CSS中使用的单位绝对很重要。并且在设置时 font-size? 应尽可能避免使用 px 。
我们在谈论什么单位，它们是做什么的？在我们讨论为什么应该避免使用 px? 作为 font-size 之前，让我们确保我们都清楚我们正在谈论哪些单位，以及它们的一般行为。
pxpx? 是像素的缩写……虽然现在大多数情况下它不再是一个真正的像素。在显示器通常是一个相对可预测的低分辨率像素比例，比如1024×768?的时代， 1px 通常等于屏幕上的一个实际像素。
屏幕使用称为像素的彩色光点阵来显示图像。一个像素是显示器上的一个彩色光点；硬件能够呈现的最小可能的“点” 。这就是我在本节中所说的“字面上的”、“实际的”或“设备”像素；物理世界中的一个像素。
然而，当高分辨率（有时称为“视网膜”）屏幕出现时，设备开始将更多的像素压缩到更小的空间中，这些物理设备像素变得非常微小。在高分辨率屏幕上浏览网页，如果CSS中的 1px 仍然对应于一个字面设备像素，那么甚至阅读任何内容都将非常困难，因为像素本身正在迅速缩小。毕竟，现代智能手机的分辨率甚至比高清电视还要高。
所以现在， 1px? 通常对应于放大的“缩放”像素的大小，而不是实际硬件上的字面像素。在我们的 CSS 中， 1px 的东西可能会占用多个物理硬件像素，而我们没有任何纯 CSS 的方法来指定一个字面设备像素。但这没关系，因为它们通常太小了，我们不想去处理它们。
一个例子：iphone 14 Pro 上的像素非常微小，16px 在字面上的设备像素大小大约相当于2pt字号的印刷字体大小。好在浏览器为我们缩放了它们！
大多数情况下，这些并不在本讨论的语境中真正重要，但我认为了解这些还是很好的。重要的部分是：1px 等于浏览器视为单个像素的任何内容（即使在硬件屏幕上它不是真正的像素）。
em 和 rem【永远不应该在CSS中使用px来设置字体大小】这就带我们来到了 em? 和 rem? ，它们彼此相似。继续讲述不严格相关但仍然有趣的小知识："em" 是一个排版术语，实际上比计算机早了几十年。在排版上，一个 em 等于当前字体大小。
如果你将字体大小设置为 32pt?（“pt”是另一个仍然有时使用的旧排版术语），那么 1em? 就是32pt? 。如果当前字体大小为 20px? ，那么 1em = 20px 。
在网页上，默认字体大小为 16px? 。一些用户从不更改默认设置，但许多人会更改。但默认情况下， 1em? 和 1rem 都将等于 16px。