基于REM的布局，缩放铬是不一致的，PX对REM

Question

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

无论我走到哪里，每个人都在吹嘘使用rem-based布局作为新的金本位，从表面上看，这种方法的优点似乎很理想(完全支持基于引用像素的缩放和字体大小缩放，以支持许多DPI和许多屏幕大小/设置)。

然而，我遇到了一个相当大的障碍，我发现Chrome (可能还有所有的webkit浏览器，但我没有mac来测试)的比例似乎与其他浏览器不一样。

使用这样的初始设置：

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

我们应该能够使用像元大小的十分之一设置所有测量值：

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

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

当您使用Chrome并以这种方式缩放时，请注意布局是如何停止缩放的，但是内容仍在继续。

将其与火狐、IE11、Edge进行比较，您根本看不到这种行为，它们都是一致的、持续的。

下面是(左上角: Chrome，右上角: IE11，左下角:边，右下角: FireFox)

​

如您所见，如果rem单元的扩展范围与其他所有单元不同，这将对布局产生一些可怕的影响。

我不确定如何处理这个场景，因为WebKit/Chrome似乎已经决定以完全不同的方式处理缩放，这就需要对未来所有的缩放场景提出质疑。

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

• 只需使用像素
• RI.P. Rem，Viva CSS参考像素！

然而，他们倾向于忽略字体缩放问题，认为这是一种不太可能的情况。

我快速浏览了一下大型移动友好/友好网站，我可以从大而成功的公司那里想到，它们中的大多数只使用像素来满足它们的所有布局需求。(谷歌、Facebook、Wordpress、Twitter、Bootstrap 3，以及在某种程度上启动4、MDN和WebPlatform)

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

Answer 1

这是因为chrome的行为是设置一个最小的字体大小，所以如果你放大，chrome将把最小字体大小设置为6px (中文和日文版为12 6px)。因此，您的div将有一个最小的宽度，因为它取决于您的基本字体大小(不能比铬的最小)。

另请参阅：

Chrome会在放大时增加字体大小。

编辑附加信息：

铬票证及对此主题的讨论：

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

Answer 2

我首先要回答你的结束语，这纯粹是因为它引起了我的注意(除了巨大的赏赐)。

“Chrome是新标准--破坏了IE?还是我做了什么可怕的错误?我很想在这一点上使用像素来保持一致性。”

是也不是。与任何其他主流浏览器引擎相比，我在WebKit浏览器中不起作用的问题更多，但在研究了各个问题之后，我通常会发现，这是因为WebKit往往比其他浏览器更严格地遵守W3C提供的规则。

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

为了将上述语句扩展到您问题的其余部分，我浏览了一下关于相对字体长度的W3C文档。在rem单元的标题下，您将注意到第一行，即：

等于根元素上“字体大小”的计算值。

不幸的是，font-size本身相对开放，可以由浏览器引擎解释。

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

* { /* 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不接受字体大小调整，而更新版本只接受字体大小调整的，并且只有在启用了的实验性功能时才接受。

最后，要回答您的其余问题，如果您正在处理实际文本内容等，rem和em是一个很好的度量单位。请按以下几行进行思考：

• 如果你希望你的<h1>总是比你的身体短信h1 { font-size: 1.25rem; }大25%
• 如果标题栏的高度必须始终是其内文本行高度的3倍，则为.header { height: 3em; }

但是，如果您正在处理的容器类型块需要在内部安装指定的内容块，则最好使用更稳定的内容块。请记住，稳定并不意味着没有反应。

举个例子：

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

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

总之。

• 是的，Chrome打破了一个让IE嫉妒的比例，但没关系。
• 是的，很多人都试着用相对的字体单位来做最好的事情，不管他们怎么说，你不需要什么都用它。
• 您的最终结果应该是一个响应性的网页。您实现这一目标的方法将根据您所拥有的内容而有所不同。
• 字体缩放是最有可能出现一段时间的一个影响因素，如果您担心它可能会影响您的网页，请确保只有需要的元素才能相对于您的字体进行缩放。
• “我很想在这一点上使用像素来保持一致性。”在大多数情况下，这是合乎逻辑的结论，因此请继续:)

Answer 3

不要使用这个CSS { font-size: 62.5%; } body { font-size: 1.6rem; } --它会导致更多值得使用的问题，因为在使用不同基本字体大小的浏览器上会得到不同的结果。只需使用此站点来计算正确的rem值。http://pxtoem.com/

这应该会给你一致的结果。https://jsfiddle.net/WizardCoder/gLkpz88q/3/

更新https://jsfiddle.net/WizardCoder/gLkpz88q/5/