我和你和许多其他开始学习 CSS 的人一样，曾经有同样的想法。然而，当我继续构建网站时，我意识到使用百分比只会导致更丑陋的网站。有几个原因促成了这一点：

1. 光栅类型、图像等不能完美缩放。当这些元素与屏幕的像素不完全对齐时，浏览器必须近似呈现这些元素。浏览器在大多数情况下都做得很好，但是在很多情况下它们没有做到这一点，并且在所有内容上使用百分比几乎可以保证至少在某些视口大小的部分页面上呈现不佳。

2. 缺乏一致的空白。几乎总是最好使用基于字体或像素大小的单位（如px、em或rem）作为边距和填充，否则即使更改字体大小也会出现不一致的空白。当边距或填充较小时，这一点尤其明显，因为白色空间渲染为 1 个像素更明显。

3. 更难维护。百分比基于继承的值，这意味着如果您有任何实际数量的元素嵌套（并且大多数网站都有很多），您将有一些样式规则来覆盖继承的值，因为否则元素的大小将根据元素的嵌套方式而不一致。rem这就是单位存在的原因。

4. 这是懒惰的编程。如果您的工作是创建一个响应式网站，那么很容易在其中添加一些百分比并将其称为“响应式”，而实际上良好的响应式设计将利用所有可用的工具（有时包括百分比）来制作最佳网站对于每个视口。

CSS 中的单位都是有原因的。一般来说，物理世界的单位（cm、in等）不用于 Web 开发，但当您对它们非常熟悉时，其余的都会定期使用。

我最常用的单位是rem, em（如果可能，大多数类型应该使用前两个单位）、px、%、vw、vh、vmin和vmax。

百分比有时过于灵活。如果您以百分比定义所有内容，则该站点将统一缩放。但对于 27-42 英寸显示器的用户来说，它不太可能希望您按屏幕宽度缩放文本。同样，小屏幕用户可能希望在转动手机时字体保持相对固定。

所以你想要一些固定尺寸的物品。由于您的字体具有更固定的大小，因此您需要侧边栏和一些固定的空白等等。因为小于文本的侧边栏没有意义。

然后是图片...

像素艺术和其他设计为完美像素的项目一旦没有以正确的像素大小或其倍数显示，就会变得模糊。

如果每个可见项目都设计为可自由缩放的向量，问题就会消失。显示分辨率应该很高，以至于在渲染矢量时必要的抗锯齿不会被视为模糊。

但他们不是。通常的屏幕分辨率（每英寸像素）太低了。例如。屏幕上的文本是矢量，为了使它们看起来清晰，每个字符必须单独放置以尽可能适合像素网格。最后的平滑是通过通常的抗锯齿（一种模糊）完成的，但如果正确地暗​​示了字符的精细位置，则不需要太多。如果人们期望与文本相同的清晰度和一致性，则每个显示的小项目都应小心放置。拥有像素完美的物品更简单。

我知道响应式设计，但在我看来，这似乎是在说有 X 个不同的屏幕尺寸，然后继续在每个屏幕上使用 px，在 X 个不同的屏幕尺寸上具有相同的缩放问题。

里面有些道理。有些人在做网站的响应式版本（无论是移动优先还是桌面优先）时，px无论他们接受什么训练（768、1024 等），都会有共同的断点。我不会说这是对还是错，这只是有些人习惯的。其他人会告诉你使用em或rem为这些。但是，如果您深入研究，大多数人倾向于指出5 年前的这篇文章，其中包含 Safari 错误，我还没有看到任何人发布更新的测试（我什至没有尝试过，而且我是一个em男人）。

它们是有效固定的（参考它们与给定项目的比率），并且仅对文本有意义（它们甚至可以应用于其他元素吗？）。

您绝对可以将它们与文本一起使用。例如，如果您有一个按钮，您可能希望内联方向上的空间（传统语法中的左右）相对于当前字体大小，因此类似的东西padding-inline: 2em可能对特定设计有意义。

在我看来，百分比是定义可调整大小的唯一真正成比例的方法，但它不可能那么简单，因为我看到的每一本书、教程、Udemy 诅咒似乎都使用 px 或几乎任何东西以外 ％。

我认为百分比的主要问题是问题总是归结为“百分比是什么？”。到视口？到盒子里？到当前字体大小？如果我们是某物的百分比，那是不是某物的百分比。这实际上就是为什么你会经常看到人们使用removerem的原因，只是因为计算更简单明了，并且不会随着嵌套而改变。此外，块方向（传统上是顶部和底部）的百分比可能是模糊的，或者至少不被理解。

所以，请像我五岁一样向我解释。为什么不在所有内容上使用 % 或视口相关的尺寸？

实际上，我们曾经这样做过，至少是百分比。做35%/65%两列布局是很常见的，尽管实际上由于空白或填充/边距问题，我们会作弊并做类似的33%/62%事情。最终，我们中的一些人发现font-size: 0了父级的窍门，或者我们会做到这一点</div><!-- vertical whitespace -><div>，或者可能只是不强制使用诸如</div><div>.

这就是 grid 和 flexbox 的用武之地。我们知道我们想要“基于百分比的布局”，但是百分比的规则已经一成不变，改变它们将是一个巨大的向后兼容性突破。

至于为什么不使用视口，它们会遇到与百分比相同的问题，至少就“两个相邻的东西”而言，您必须破解才能使其工作。但是，我确实认为视口单位确实会发光，特别是在用作最小或最大尺寸时。例如，对于标题中的字体，您可以将clamp其设置到允许缩放的最大值5vw，但只能缩放到某个点。和一个盒子一样。至少它应该是屏幕的 1/3，但如果有空间，它可以变得更大。但他们也受到这样一个事实的困扰，即50vw在我的移动设备上与我的横向桌面设置截然不同。

我想我的总结是：

百分比的规则很久以前就已经确定了，无法更改。我们对我们希望他们做什么有一种感觉，但这与现实不符。然而，创建了更新的单元来解决这个问题。至于视口，它们有时间和地点，但是可用的物理尺寸如此之多，以至于您通过解决任何人的问题来解决每个人的问题。

编辑

是否存在最佳实践的普遍共识？即一些书、网站、Udemy 课程会告诉我什么也使用哪个测量单位（以及为什么）？

我能真正告诉你的是我所做的，这是基于 20 多年的经验，以及我在观看其他人构建东西或继承其他人的网站时仍在学习的东西。

• 对于文本，使用em或rem。只要您了解它们的相对关系，它们都是相同的。就个人而言，我rem支持 99.999% 的文本，em如果我在::before或::after. 另外，我仍然设置font-size: 62.5%了 HTML 标签，虽然我不知道这是否仍然很酷。如果您想要流畅的文本（并非每个设计都需要），请考虑使用clamp()with vw。然而，我个人并没有很多需要这个的设计。
• 对于文本的边距/填充，使用em或rem。特别是对于段落，您通常希望两个文本块之间的垂直距离本质上是“空白行”，您可以从em或rem.
• 对于高级别的框对齐，请使用网格和/或 flexbox。我个人是一个grid人，我一直使用这些fr单位。如果您不熟悉fr，它们实际上就是每个人都想要的百分比。Flex 也很棒。何时以及为什么真的取决于你的技能，但老实说，他们可以在 75% 的时间里换掉。
• 对于与框相关的任何其他内容，请使用rem.
• 对于边界半径，百分比是可以的，但em也rem可能有效。只需测试一下，看看它们是否按您的预期进行扩展。
• 对于媒体查询，使用em,rem或px. 我个人em全面使用，但就像我上面提到的那样，我多年来没有重新测试过。然而，我团队中的另一位开发人员使用px，我们相处得很好。

就是这样。你会看到我rem的使用很重，但这只是我。我对 90% 的其他单元不感兴趣，或者它们用于奇怪的边缘情况。例如，ch可用于通过字符数限制行长。如果这适用于您的设计，请尝试一下，但我仍然使用rem它。

最后，要克服的最大障碍之一就是接受并非一切都必须看起来完美的事实。除了数以百万计的屏幕尺寸外，用户还可以更改其缩放比例以及默认字体大小。这是一个用户明确表示他们想要不同的东西。传达的信息需要相同，但绝对不能与设计的相同。它应该是一致的，并且您会发现边缘情况（例如，当您总是假设标题是单行时，它如何在某些缩放下流向更多行时的行长）并且您可以根据需要进行调整。

编辑 2 我只是想谈谈现在最重要的另一件事，container查询！我不会深入研究它们，甚至也不会发表我的意见，但有些人认为有可能完全或几乎完全删除有利于这些的媒体查询。这是否会发生还有待观察，但我可以向你保证，有些人绝对会尝试这样做，并将其作为一项规则来执行。我还可以保证，接受过媒体查询培训的整整一代人在未来很多年仍然会使用它们。

我知道，您的问题与媒体查询无关，但我之所以这么说，是因为这与共识或做事的最佳方式有关，而且我毫不怀疑，正如“正确”之间存在差异一样， 768px vs 48em，媒体 vs 容器最终会出现。