css - 基于 Rem 的布局，在 chrome 上缩放不一致，PX 与 REM

Question

我一直在为这个问题绞尽脑汁，谷歌搜索并没有真正提供太多帮助，甚至没有关于这个问题的文档，但它极大地影响了我目前向移动友好型设计的转变。

无论我走到哪里，每个人都在吹捧使用基于 rem 的布局作为新的黄金标准，从表面上看，这种方法的优点似乎很理想(对基于引用像素的缩放和字体的完全可访问性支持- 尺寸缩放以支持多种 DPI 和多种屏幕尺寸/设置)。

然而，我遇到了一个相当大的障碍，我发现 Chrome(可能还有所有 webkit 浏览器，但我没有 mac atm 来测试)似乎没有像剩下的。

初始设置如下:

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

我们应该能够使用以 rems 为单位的像素大小的 1/10 来设置我们所有的测量值:

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

我创建了一个简单示例来说明我的问题:https://jsfiddle.net/gLkpz88q/2/embedded/result/

当您使用 Chrome 并以这种方式向外扩展时，请注意布局如何停止缩放但内容会继续。

将此与 Firefox、IE11、Edge 进行比较，您根本看不到这种行为，它们都统一且持续地缩放。

这是(左上角:Chrome，右上角:IE11，左下角:Edge，右下角:FireFox)并排显示:

如您所见，如果 rem 单位的缩放比例与其他所有单位不同，这会对布局产生一些可怕的影响。

我不确定如何继续这个场景，因为 WebKit/Chrome 似乎决定以完全不同的方式处理缩放，这需要质疑所有 future 的缩放场景。

有很多文章提倡只使用像素，因为 CSS 引用像素 很好地处理了移动缩放:

• Just Use Pixels
• R.I.P. Rem, Viva CSS Reference Pixel!

然而，这些往往会忽略字体缩放问题，认为这是不太可能发生的情况。

我快速浏览了一些我能想到的大型和成功公司的大型移动友好/友好网站，似乎他们中的大多数只使用像素来满足他们所有的布局需求。 (Google、Facebook、Wordpress、Twitter、Bootstrap 3、[在某种程度上还有 Bootstrap 4]、MDN 和 WebPlatform )

Chrome 是新的违反标准的 IE 吗？还是我做错了什么？为了保持一致性，我很想在这一点上只使用像素。

Answer 1

我将首先解决您的结束语来开始我的回答，纯粹是因为它引起了我的注意(除了巨大的赏金之外)。

“Chrome 是新的违反标准的 IE 吗？还是我做错了什么可怕的事情？我很想在这一点上只使用像素来保持一致性。”

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

大多数其他浏览器引擎似乎对开发人员都非常宽容，我喜欢他们这一点，但我们不能因为遵守规则而将 WebKit 钉在十字架上。

为了将上述陈述扩展到您的问题的其余部分，我浏览了 W3C document regarding relative font lengths .在 rem 单位 的标题下，您会注意到第一行说明:

Equal to the computed value of ‘font-size’ on the root element.

不幸的是，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; }

但是，如果您正在使用需要在内部容纳指定内容 block 的容器类型 block ，那么使用更稳定的东西总是更好。请记住，稳定并不意味着 react 迟钝。

以此为例:

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

这将使您的元素很好地 float 在页面中间，同时保持元素的大小适合其中的内容，如果屏幕尺寸减小到小于您的 .my-element 的点。高度，它会相应地调整。

简而言之。

• 是的，Chrome 的破坏程度让 IE 嫉妒，但这没关系。
• 是的，很多人确实尝试使用相对字体单位作为最好的做法，但是与他们所说的相反，您不需要对所有事情都使用它。
• 您的最终结果应该是响应式网页。您实现此目标的方式将根据您拥有的内容而有所不同。
• 字体缩放是一个很可能会持续一段时间的影响因素，如果您担心它会如何影响您的网页，请确保只显示需要的元素根据您的字体缩放，将随您的字体缩放。
• “我很想在这一点上只使用像素来保持一致性。”在大多数情况下这是合乎逻辑的结论，所以去吧:)