Rem-Based 布局、Chrome 浏览器缩放不一致、PX vs REM。

Question

我一直在为这个问题苦苦思索，Google 搜索并没有提供什么有用的帮助或文档来解决这个问题，但它严重影响了我的移动友好设计。

无论我走到哪里，每个人都在大力推崇使用基于 rem 的布局作为新的黄金标准，表面上这种方法的优点似乎是理想的（全面支持参考像素缩放和字体大小缩放以支持许多 DPI 和许多屏幕尺寸/设置的完整可访问性支持）。

然而，我遇到了一个相当大的问题，我发现 Chrome（可能所有 WebKit 浏览器，但我目前没有 Mac 进行测试）似乎不与其他浏览器缩放相同。

初始设置如下：

html { font-size: 62.5%; }
body { font-size: 1.6rem; }

我们应该能够使用1/10的像素大小来设置所有的测量单位，即使用rem：

.my-element { height: 15rem; } /* 150px */

我创建了一个简单的示例来说明我的问题，链接在这里：https://jsfiddle.net/gLkpz88q/2/embedded/result/

当您使用Chrome并将其缩放时，请注意布局停止缩放，但内容继续缩放。

与Firefox、IE11和Edge相比，您根本看不到这种行为，它们都可以均匀且持续地缩放。

这是（左上角：Chrome，右上角：IE11，左下角：Edge，右下角：FireFox）并排显示的图像：

正如您所看到的，如果rem单位的缩放方式与其他所有内容不同，则会对布局产生一些可怕的影响。

我不确定如何处理这种情况，因为似乎WebKit / Chrome已经完全不同地处理缩放，这引发了所有缩放方案的问题。

有许多文章提倡只使用像素作为CSS参考像素非常好地处理了移动缩放：

• 只使用像素
• R.I.P. Rem, Viva CSS Reference Pixel!

但是，这些文章往往忽略了字体缩放问题，并将其视为不太可能发生的情况。

我快速查看了许多大型移动友好/友好的网站，这些网站来自大型和成功的公司，似乎他们都只使用像素来满足其所有布局需求。 （Google、Facebook、Wordpress、Twitter、Bootstrap 3、[在某种程度上Bootstrap 4]、MDN和WebPlatform）

Chrome是新的标准破坏IE吗？还是我做错了什么？我现在很想出于一致性而只使用像素。

- Aren

---

感谢您发布了一个300美元的悬赏问题 - 我从未更有动力去研究某些事情 ;) - Frits

Answer 1

首先，我会从回答中涉及到的结尾语句开始回答，这是因为它引起了我的注意（除了巨额赏金）。

"Chrome是否成为新的标准破坏IE？还是我做错了什么？我现在很想只使用像素来保持一致性。"

有些是，有些不是。与任何其他主流浏览器引擎相比，我在WebKit浏览器中遇到的问题更多，但经过调查每个单独的问题后，我通常发现这是因为WebKit更严格地遵循W3C提供的规则。

大多数其他浏览器引擎似乎对开发人员非常宽容，我喜欢他们对此，但我们不能因为遵循规则而谴责WebKit。

将上述说法扩展到您问题的其余部分，我浏览了关于相对字体长度的W3C文档。在 rem单位的标题下，您会注意到第一行声明：

等于根元素中“font-size”的计算值。

不幸的是，font-size本身在您的浏览器引擎中相对开放解释。

Cyrix的回答是正确的，因为Chrome将根据其引擎内置的最小字体大小调整您的字体大小。要轻松解决问题，您可以在容器元素上使用text-size-adjust或更新的font-size-adjust规则来防止这种情况：

* { /* Replacing "*" with ".my-element" would probably be better for the rest of your site*/
    -webkit-text-size-adjust: none;
    -webkit-font-size-adjust: none;
}

然而问题在于，较旧版本的Chrome不接受font-size-adjust，而较新版本只有在启用实验性特性时才接受font-size-adjust，且仅能接受它。

总之，回答你其余的问题，如果你要处理实际文本内容等，rem和em是很好的度量单位。可以考虑以下几点：

• 如果你想让你的<h1>始终大约比正文文本大25%：h1 { font-size: 1.25rem; }
• 如果你的标题栏高度必须始终为其内部文本行高的3倍：.header { height: 3em; }

但是，如果你要处理需要适应指定内容块的容器类型块，最好使用更稳定的东西。请记住，稳定并不意味着不响应。

以这个为例：

.my-element {
  width: 95%;
  margin: auto;
  max-width: 600px;
}

这将使您的元素在页面中漂亮地浮动，同时保持适合内容的尺寸。如果屏幕尺寸缩小到小于您的.my-element高度的点，则会相应调整大小。

简而言之

• 是的，Chrome会以IE嫉妒的规模破坏某些东西，但没关系。
• 是的，很多人试图使用相对字体单位作为最佳选择，然而与他们所说的相反，你不需要全部使用它。
• 你的最终结果应该是一个响应式网页。根据你所拥有的内容，实现这一目标的方法会有所不同。
• 字体缩放是一个影响因素，很可能会持续存在。如果你担心它会如何影响你的网页，请确保只有那些需要与字体成比例缩放的元素才会随字体一起缩放。
• "我倾向于现在只使用像素以保持一致性。"这在大多数情况下是合乎逻辑的结论，所以去做吧 :)

- Frits

---

我尝试回答了你所有的问题并解决了你所有的评论，但如果我漏掉了什么，请随时告诉我。 - Frits

非常感谢您花时间进行详细的研究并回答问题。我在确定应该将赏金给谁时遇到了很大的困难，因为cryix的答案非常准确，但是付出的努力较少，也不太权威。最终，他的答案带领我找到了权威信息，并获得了我所期望的更深入的理解。 - Aren

我很欣赏你的积极性，并指出了font-size-adjust，但这并不是解决这个问题的稳定方法，因为它是一个草案、供应商特定、不稳定的功能，实际上并不是为解决这个问题而设计的（即使它偶然地解决了这个问题）。我希望这不会让你对回答问题或寻求悬赏感到气馁，我很感激你的努力。 - Aren

@Aren 说实话，我并没有真正期望获得赏金，因为 Citrix 已经给出了正确的答案，但我很享受这个研究过程，所以想在这里发布更多信息（必须要收割那些点赞啊 ;) ）。不过还是非常感谢你回复了我的评论！ - Frits

Answer 2

那是因为Chrome会设置最小字体大小，所以如果你缩小页面，Chrome会将最小字体大小设置为6px（中文和日文版本为12px）。因此，你的

标签将有一个最小宽度，因为它取决于你的基础字体大小（它不能比Chrome的最小值更小）。

另请参见： Chrome在缩小页面时会增加字体大小 【编辑】附加信息：

关于这个主题的Chromium票据和讨论：

https://bugs.chromium.org/p/chromium/issues/detail?id=16875 https://bugs.chromium.org/p/chromium/issues/detail?id=36429

-webkit-text-size-adjust支持已经被放弃，因此这种行为的可行解决方案不再可靠：

https://trac.webkit.org/changeset/145168/webkit

- cyr_x

---

这真的很有趣，而且很有道理。我希望这些信息更容易找到，我不知道Chrome会限制默认字体大小的最小值。我理解这样做的原因，但它确实会产生一些尴尬的结果。 - Aren

Answer 3

不要使用这个 CSS { font-size: 62.5%; } body { font-size: 1.6rem; }，它会导致更多的问题，因为在不同基础字体大小的浏览器上会得到不同的结果。只需使用此网站来计算正确的 rem 值。http://pxtoem.com/ 这应该能给您带来一致的结果。https://jsfiddle.net/WizardCoder/gLkpz88q/3/

UPDATE https://jsfiddle.net/WizardCoder/gLkpz88q/5/

- WizardCoder

---

我知道人们对 62.5% 技巧的厌恶，但不这样做仍会受到不同浏览器上默认字体大小的影响，标准只会变得“更大”。您提供的示例仍显示出 33% 和 25% 缩放级别之间相同的基本行为，较大的基本大小使问题更加微妙，但并不能完全防止它。您会注意到，在 33% 和 25% 之间，一般布局基本保持不变，但图像缩小了，这意味着它与其周围基于 rem 的内容之间的关系不再保持一致。 - Aren

实际上它有同样的问题。正如cyrix在他的回答中所述，这只是Chrome的表现。你为什么想要缩小到那么远呢？ - WizardCoder

这并不是想要那么远程缩放的问题，更多的是想知道为什么会发生这种情况，并且是否会在以后的其他地方对我造成影响。对这种异常行为进行计算风险评估很重要，以便为项目的长期管理提供正当的理由。 - Aren

就我个人而言，这从未成为我的任何项目的问题。主要是因为我的构建是完全响应式的，使用基于REM的媒体查询，因此网站将适应浏览器之间字体大小差异。但也有人可能持不同意见，这只是我的经验。 - WizardCoder

Answer 4

我在项目中遇到了一个问题，当设置基础rem时，浏览器缩放不均匀。我在项目中的大部分地方使用了rem。因此，我不得不根据屏幕尺寸动态设置基础rem。我将分享一些设置基础rem的方法和我遇到的问题。缩放不一致是由于当我们缩小屏幕宽度时，放大屏幕宽度会增加，而当我们放大屏幕宽度时，缩小屏幕宽度会减少。因此，如果我们使用媒体查询或vw来设置rem，当缩放时它看起来不一致。

固定单位可以用像px、%这样的单位来设置基础rem：

    html{
      font-size:68%;
           or
      font-size:16px;
    }

优点:

• 在所有屏幕尺寸上都使用相同的基础rem。
• 浏览器缩放和放大会保持一致。

缺点:

• 由于它是固定值，不会根据屏幕尺寸而变化。
• 有时候指定的基础rem可能导致元素在小屏幕上无法调整。

使用媒体查询来设置基础rem：

html {
  font-size: 17px;
}
@media (max-width: 1536px) {
  html { font-size: 15px; }
}
@media (max-width: 1920px) {
  html { font-size: 13px; }
}

优点:

• 基础rem值会根据屏幕尺寸进行更改。

缺点:

• 浏览器的缩放会不一致。

使用vw来设置基础rem值:

    html{
      font-size:1vw;
    }

优点:

• 基于屏幕大小进行调整，适配不同屏幕。如果你的项目不需要缩放，它能够完美适应屏幕。

缺点:

• 浏览器的缩放功能将保持一致，但某些元素的缩放可能无法正常工作，因此有时可能会看起来混乱。

动态单位组合 以设置基本rem：

html{
  font-size:calc(.5em+.5vw);
}

优点:

• 只需要调整基础rem的em和vw即可根据需要为一个屏幕进行调整，然后基于屏幕大小进行调整。
• 缩放进和缩放出将保持一致。

- Hemachandran V K