共计 5680 个字符，预计需要花费 15 分钟才能阅读完成。
本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一工夫和你分享前端行业趋势，学习路径等等。
更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi，蕴含一线大厂面试残缺考点、材料以及我的系列文章。
代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
在 Josh Collinsworth 的博客文章“永远不要用 px 作为字体大小”中，作者探讨了为什么不应该应用像素（px）作为网页字体大小的单位[1]。作者指出，绝对于容器、浏览器或用户的字体大小，px 值是动态的。无论用户的字体偏好设置如何，当咱们以动态像素设置值时，它将笼罩用户的抉择，以咱们指定的确切值代替。这意味着，如果我 wu7 的样式表应用像素单位，可能导致拜访网站的用户难以浏览。
因而，作者倡议应用绝对单位，如 em、rem 或百分比，而不是像素。这些单位是基于用户的字体大小偏好设置进行缩放的，从而提供了更好的可拜访性和可读性。尤其是在设计响应式网站时，绝对单位可能进步跨设施的兼容性。通过应用绝对单位，设计师能够确保网站在不同设施和浏览器中以适合的字体大小显示[1]。
上面是注释：
在 Web 开发畛域中，有很多误会流传，即便它们被反驳了很屡次也依然存在。” 内部链接应该总是在新标签页中关上 ” 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了具体的解释（简而言之：大多数状况下是谬误的），但它仿佛依然在某些角落中存在。
案例证实：在 CSS 中，px，em 或 rem 单位之间没有性能上的区别的想法是一个我一遍又一遍听到的误会，因而我想在这里发帖来解决这个问题。
咱们要十分分明：在 CSS 中应用的单位相对很重要。并且在设置时 font-size 应尽可能防止应用 px。
咱们在议论什么单位，它们是做什么的？
在咱们探讨为什么应该防止应用 px 作为 font-size 之前，让咱们确保咱们都分明咱们正在议论哪些单位，以及它们的个别行为。
px
px 是像素的缩写……尽管当初大多数状况下它不再是一个真正的像素。在显示器通常是一个绝对可预测的低分辨率像素比例，比方 1024×768 的时代，1px 通常等于屏幕上的一个理论像素。
屏幕应用称为像素的黑白光点阵来显示图像。一个像素是显示器上的一个黑白光点；硬件可能出现的最小可能的“点”。这就是我在本节中所说的“字面上的”、“理论的”或“设施”像素；物理世界中的一个像素。
然而，当高分辨率（有时称为“视网膜”）屏幕呈现时，设施开始将更多的像素压缩到更小的空间中，这些物理设施像素变得十分渺小。在高分辨率屏幕上浏览网页，如果 CSS 中的 1px 依然对应于一个字面设施像素，那么甚至浏览任何内容都将十分艰难，因为像素自身正在迅速放大。毕竟，古代智能手机的分辨率甚至比高清电视还要高。
所以当初，1px 通常对应于放大的“缩放”像素的大小，而不是理论硬件上的字面像素。在咱们的 CSS 中，1px 的货色可能会占用多个物理硬件像素，而咱们没有任何纯 CSS 的办法来指定一个字面设施像素。但这没关系，因为它们通常太小了，咱们不想去解决它们。
一个例子：iPhone 14 Pro 上的像素十分渺小，16px 在字面上的设施像素大小大概相当于 2pt 字号的印刷字体大小。好在浏览器为咱们缩放了它们！
大多数状况下，这些并不在本探讨的语境中真正重要，但我认为理解这些还是很好的。重要的局部是：1px 等于浏览器视为单个像素的任何内容（即便在硬件屏幕上它不是真正的像素）。
em 和 rem
这就带咱们来到了 em 和 rem，它们彼此类似。持续讲述不严格相干但依然乏味的小常识：“em” 是一个排版术语，实际上比计算机早了几十年。在排版上，一个 em 等于以后字体大小。
如果你将字体大小设置为 32pt（“pt”是另一个依然有时应用的旧排版术语），那么 1em 就是32pt。如果以后字体大小为 20px，那么 1em = 20px。
在网页上，默认字体大小为 16px。一些用户从不更改默认设置，但许多人会更改。但默认状况下，1em 和 1rem 都将等于 16px。
“Em”最后是指“M”字符的宽度，这也是名称的由来。但当初它指的是以后字体大小，而不是特定字形的尺寸。
EM 和 REM 之间的区别
为了辨别这两者：1rem 始终等于浏览器的字体大小，或者更精确地说是 html 元素的字体大小。rem 代表“根 em”，而网页的根是 <html> 标签。因而，1rem = document 字体大小。（默认状况下，这是 16px，但能够被用户笼罩。）
另一方面，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 Iframe
EDIT 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 tenetur sint illum obcaecati similique sequi doloribus eligendi?</p>
<p>Eos quidem iure debitis dolorum repellendus ab incidunt ipsam suscipit, autem consequuntur?</p>p {
border-bottom: 2px solid black;
margin-top: 0;
margin-bottom: 20px;
}咱们有几个段落，每个段落底部有 2px 边框，并且它们之间有 20px 边距。请留神，咱们对两者都应用 px 单位。
如果你放大或放大，元素的大小和间隔放弃绝对不变。也就是说：你放大得越多，那条线就越粗，段落之间的间距就越大。
为了不便起见，这里有一张截图，显示了同一支笔的 400%缩放。文本、线条和间距都变大了 4 倍；它们绝对于彼此的大小放弃不变：
当波及到缩放时， px、em 或 rem 之间没有真正的区别。但缩放并不是用户使网站更易用的惟一办法。
如前所述，用户还能够指定默认和 / 或最小字体大小。当他们这样做时，性能开始一致。
在上面的截图中，我已将 Firefox 的默认字体大小设置为 64px。看一下：
将屏幕截图中的文本与其上方的文本进行比拟。请留神，这一次，行并没有变粗，段落之间的边距也没有成比例减少。只有文本自身变大了。因为边框宽度和边距都是在 px 中设置的，它们放弃不变，不会缩放。
然而请留神，如果将 CSS 中的 px 更改为相应的 rem 值，会发现线条和间距的确变大了！(zh-Hans)
所以，这里的总结是：
- 当用户更改字体大小时，px 值不会缩放。
- em 和 rem 的值会随字体大小成比例调整。
如果你想要一个交互式演示，将所有这些内容分割在一起，请查看最终的 CodePen；调整顶部的滑块以查看批改文档字体大小对各种元素的影响，基于它们应用的 CSS 单位。
https://codepen.io/collinsworth/pen/KKepeMQ
抉择哪一个
因而，晓得 em 和 rem 会随字体大小缩放，但 px 值不会，那么咱们该怎么办？咱们应该永远不应用 px 吗？
尽管我认为如果你抉择这条路，你可能会没事，但我依然认为 px 有其存在的意义。
咱们晓得当用户调整字体大小时 px 值不会扭转，这意味着像素单位实际上是某些美学元素的不错抉择。兴许咱们有肯定的间距，咱们不心愿在字体大小变大时变得更大。（如果默认状况下是一个大块的负空间，兴许容许它缩放到更大的尺寸是没有意义的。）
兴许有一些边框大小咱们不想扭转，或者页面上有用 CSS 创立的装璜元素，在更大的字体大小下看起来成果不佳。兴许咱们不心愿填充随着字体大小的减少而收缩。在所有这些状况下，px 依然是一个不错的抉择。
我集体倡议应用 rem 来设置所有的大小。我只在想要与以后字体大小成比例的货色（例如，与一些文本旁边的图标应该与字符的高度完全相同，并且在一侧有半个字符的状况）中增加 em。我不会在任何中央应用 px，除非是明确不想随字体大小缩放的设计元素。
永远不要用 px 单位中设置 font-size，除非你十分确定你在做什么，它会如何口头，以及在你这样做时它是否依然可拜访。
对于媒体查问的重要阐明
出于与上述所有起因雷同的起因，重要的是要防止在 @media 查问中应用 px；当用户缩放时，它将失常工作，然而应用 px 的媒体查问将在用户本人设置更大的字体大小时失败。
@media (min-width: 800px) {/* Changing font size does NOT affect this breakpoint */}
@media (min-width: 50rem) {/* Changing font size DOES affect this breakpoint */}这是因为随着字体大小的减少，50rem 会依据用户的偏好变成不同的值，而 800px 则不会。
很可能，当咱们为较大的断点编写 CSS 时，咱们认为有足够的屏幕空间让元素扩大。如果用户设置了十分大的字体大小，则可能不是这种状况，将媒体查问设置为 rem 而不是 px 能够帮忙咱们防止这种假如并响应用户的偏好。
我在这个网站上遇到了这个问题；我把所有的断点都设置在 px 上。然而，当我将默认字体大小设置得更大时，我的媒体查问没有响应，因为它们依然只查看屏幕的像素宽度。因而，我依然有一个渺小的侧边栏，外面塞满了难以辨认的微小文本，因为我没有思考用户的偏好。在那之后，我立刻改为 rem，问题失去了解决。
简而言之：在媒体查问中，除非您确定本人晓得在浏览器中设置本人的字体大小会对用户产生什么影响，否则肯定要防止应用 px。
原文：https://joshcollinsworth.com/blog/never-use-px-for-font-size
交换
有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。