“我应该使用PX或EM/REM？”
这是一个情绪问题。要看这句话，通常会有焦虑，沮丧或混乱的痕迹。还有什么？
这个问题很容易引起争议，并且总是跌倒。大多数人认为它将更容易访问。但是这不是其他问题。在某些情况下，rem更容易访问，在其他情况下，PX更容易访问，在某些情况下，您需要使用PX并将REM一起构建最简单的产品。
因此，这些事情将在本文中完成：
它是CSS中最常见的单元。每个人都触摸的第一个单元是。它的用法是：
它的值是绝对的。这意味着它意味着计算机显示或手机屏幕上的一个像素点。它是最简单的单元，也是最小抽象的单元。它最接近“金属”，所以感觉非常直观。
硬件和软件像素
实际上，严格来说，这个单元不准确，因为它不会映射到硬件像素1：1。如果您在显微镜下观察到现代监视器，您会发现它们不再由清晰的小r/g/b矩形组成。以下是Apple Watch和Apple iPhone屏幕的近距离镜头：
甚至在硬件制造商的像素网格的创造性安排之前，屏幕中的物理像素仍然与我们在CSS中编写的软件像素有所不同。east用户更改了屏幕的屏幕分辨率或屏幕方法，它们将软件像素的方式更改为硬件像素，但这只是其中之一。但是这些不影响我们权利的感觉，它仍然是最具体和绝对的单位。
它更有趣，它是一个相对单元，它是根据元素字体的大小来计算的，但是有些人会混淆此基准元素是元素本身而不是元素的父级。您可以使用以下代码来验证您刚才所说的话。
实际上，这是一个百分比值。如果我们将设备设置为1.5，我们可以说它是字体大小的1.5倍，实际上是变焦。
工作原理是一致的，但区别在于其基准元素是基于自身的，但基于元素。
因为EM单元是一个“轻率”（假）单元，因此很容易受到影响！检查代码：
该元素的字体有多大？为了弄清此问题，我们必须使用其所有父级乘以其字体大小。默认情况下，根元素的大小为16px，因此其计算过程是：结果是：结果是：结果是：结果是：结果是：结果是。
嗯，为什么？交叉点，这是因为字体大小是继承的。本段中字体的大小是“当前字体的1.25倍”。但是当前字体大小是多少？嗯，它是从parent的继承的：因此，是父节点的1.25倍，父节点的0.9倍，而父节点的1.125倍。
实际上，我们需要将每个值乘以树中的每个值，直到达到“固定”值（使用像素）或在树的顶部到达。为了解决此问题，CSS语言设计师创建了该单元，该单元表示“ root”Em”。
该单元就像一个单元，但它始终是根节点上字体大小的倍数（元素）。它忽略了任何继承的字体大小，并且始终基于顶点节点进行计算。文档的默认字体大小为16像素，这意味着16个像素。我们可以通过更改根节点来重新定义值：
您可以做到这一点，但不建议这样做。要了解原因，我们需要谈论“可访问性”。
当涉及到PX/EM/REM时，最主要的是被视为愿景。我们希望有限的视觉者可以在我们的网站上阅读句子和段落以及舒适的网络应用程序。
视力有限的人可以通过集中方法来增加文本的规模。
通过重新定义字体大小的“默认值”，字体缩放工作。所有相关单元将基于默认字体大小（rem，em，％）。我之前说的是，当用户没有积极修改默认字体大小！但是，如果他们将默认字体大小设置为32px，然后它们将没有任何东西。本质上，我们可以将此行为缩放为修改根元素的字体大小。
这就是为什么我们应该使用这样的相对单元来表示文本的大小。
当用户方法或收缩小时时，一切都会改变，基本上它将将多个设备应用于每个单元，包括像素。它会影响视口单元（VW/VH等）以外的所有内容。
但是，如果用户始终可以增加字体尺寸，我们真的需要担心支持字体吗？现在选择不够好吗？不够吗？为什么？问题是？问题是，缩放实际上是用来基于使用它的每个站点的。每次您访问新站点时，有些人都必须调整页面的缩放比例以确保正常浏览。但是，如果他们可以设置“默认”字体大小，则足以支持用户舒适地阅读的字体大小，并且让这个尺寸得到普遍尊重，不是更好吗？或阻止它们设置。在这个原因，使用类似的相对单位排版非常重要。
在理解REM的好处之后，您可能会认为，由于它是如此易于使用，所以我为什么仍然使用它？考虑以下两个代码：
当逐渐增加时，两种样式给用户带来的体验是否相同？
这显然不同。当基准值不变时，以下经验将比上面好得多。
请记住，字体的值以字体的大小缩小。当涉及页面的布局时，这不是一件好事。文本中间有深色坑。文本越大，每行字符的容纳越少。当用户将文本提高到250％时，可以显示每行的文本可能是几个单词或几个文本。
当我们填补使用时，我们会放大这种负面影响。我们正在做一些会导致可用空间数量以减少可用空间数量的事情，这将进一步限制每行可以容纳的文本内容。这是非常糟糕的，因为每行的内容都过于限制，并且在阅读时会感到非常疲倦。相似，如果也设置了边框宽度，这也不需要，因为当用户在方法页面上时，框架的宽度会变厚。不是吗？
因此，这就是为什么我们需要战略性地使用这些单元的原因。在PX和REM之间进行选择时，我们需要问自己：“该值是否应该在浏览器的默认字体大小中缩放？”
这个问题是这种心理模型的关键。如果需要在字体的大小中缩放此值，则应使用它，否则应该使用它，例如边框的宽度。但是，这个问题并不总是那么容易获得答案，让我们看看一些例子：
当使用媒体查询时，您应该使用REM还是PX？
只是答案并不明显，让我们尝试分解。
假设用户将默认字体大小设置为32px，这是标准文本的两倍。不太关心此值，请尝试将其视为800px。如果您是视觉障碍，但是您使用1600px设备要访问网站，您可能会看到手机端的布局。在设备的分辨率大于此值之前，可以看到桌面布局。
乍一看，这种逻辑似乎不是问题。您不是移动用户。为什么网页需要向您显示移动终端的布局？但是，通常，我们通常要使用REM进行媒体查询。
但是，当我们使用基于REM的媒体查询时，我们将返回“移动终端”布局。结果，内容变得更加可读性，并且体验得到了极大的改进。我们用于从移动的角度考虑媒体查询/平板电脑/台式机，但我认为从可用空间的角度来看，它比台式机用户更有帮助，因此，我们已经为空间数量设计了一系列优化的布局。它们的默认字体，它们将减少可用空间的数量，因此可以获得相同的优化。
另一个场景是我们使用REM设置元素的外部距离。当我们的文本越来越大时，我们应该使用REM设置边框距离，为什么又是？
这是因为随着字体大小的变化，如果仍然设置了PX的设置，并且边框距离设置不够大，并且当字体越来越大，就视觉透视而言，我们得到的反馈是文本似乎在文本之间。根本没有边界距离。随着文本的大小变化，边界的边缘通常得到很大改善。我们在段落之间添加其他控件，以便我们可以快速判断段落的结尾和下一段的起始位置。出于这个原因，我认为使用用户选择的大小字体放大这些边距是有意义的。
标题文本的一点点扩展。当我们需要一个相对单元时，我们通常会使用它。比这个问题更容易预测。换句话说，EM单元对标题和段落的页面具有特别好的效果。例如，以下是设置标题的样式：
上面的代码看起来没问题，除了可以写入复合值，但看起来仍然有些“尴尬”。尽管每个标题的级别都有自己的字体大小，我们需要计算每个标题的唯一边框值。以下效果是相同的，但是要简单得多：
每个标题级别都有一个唯一的字体大小，但是通过它们可以共享边界声明。这是因为计算当前元素的字体大小。换句话说，我们说每个标题级别应具有“ 2x”“和“ 0.5倍”的较低距离。这些比例适合标题的字体大小。最后，两种方法都是100％效率且可以访问的。还有什么？
让我们看看另一个场景。这是一个固定宽度按钮：
我们都知道应该用REM设置它，但是...呢？其中有两个方案：7。如果将宽度设置为宽度，则按钮不会随字体的大小而增加，这将导致更改和更高的按钮8。如果我们将宽度设置为宽度，则按钮将随字体的大小扩大。
选择哪一个？仍然需要依赖实际情况！在大多数情况下，我认为使用remss更有意义。这保留了按钮的比例和美学。如果按钮有一个特别长的单词，则可以减少在某些情况下，PX可能是一个更好的选择。也许，如果您的布局非常特定，垂直空间比水平空间更丰富。
在设置固定高度时，通常需要非常小心。在上面的示例中，在许多情况下，设置会破坏移动布局，因为当用户调整默认字体大小时，它可能会为其容器生成夸张的值！我们可以通过将其限制为最多100％：
同样，当它涉及高度时，我们经常想使用它。这使容器可以生长到适应其子级别元素所需的高度。用户扩大字体时，这变得很重要，因为文本最终会更改为更多的线条。
REM的转换并不容易。在正常情况下，转换时我们将获得很多小数位置，例如：
即使您的大脑的计算能力很棒，也很容易计算此结果，但是并不是每个人都可以这样做，因此我们会考虑许多改善此问题的方法。
将根元素的根元素设置为此将在很大程度上可以改善您的发展体验。
许多人喜欢这种解决方案，因为这样做之后，数字操作变得更加简单。如果要设置18px的REM值，则只需要移动小数点的位置，然后将PX的位置替换为REM而不是18 /没有18/16获得1.125 GET 1.125 Plus REM。
实际上，这种方法不好37.5％比原始尺寸小！同样，此行为还将破坏浏览器扩展的性能10。这种方法具有这种伟大的迁移和重建挑战。没有逐渐采用它的逐渐方法，您只能替换项目中每个单元的陈述和价值。而且还必须说服团队中的其他成员说服他们要说这是值得的，但这对许多团队并不总是有利的。
使用CSS方法，可以将像素值转换为rem。这很棒，但是要编写的代码太多...
我认为这是最好的方法：
我们可以一次完成所有计算，并使用CSS变量存储这些选项值。尽管CSS变量从数字开始时看起来不标准化，但它是标准化的，适用于所有现代浏览器。
如果项目中有网格系统，我们也可以使用相同的技能：
当然，我们每个人都会有自己的想法。选择技术时，我们将有自己的项目和团队考虑，但这并不重要。可以使用最重要的方法。最重要的是要确保良好的用户体验。只要他们在使用时不抱怨和不适，那么您做对了。还有什么？
多于。
原始：https：//juejin.cn/post/7099513293374488590