简而言之。

Question

我一直在抨击我的大脑，谷歌搜索并没有真正帮助甚至记录这个问题，但它影响了我目前转换为适合移动设备。

我去的每个地方，每个人都在使用基于rem的布局作为新的黄金标准进行宣传，从表面上看，这种方法的优点似乎是理想的（对基于参考像素的缩放和字体大小缩放以支持许多DPI和许多屏幕尺寸/设置。

然而，我遇到了一个相当大的障碍，我发现Chrome（可能还有所有的webkit浏览器，但我没有测试的mac atm） don＆＃39 ; t似乎与其余部分相同。

初始设置如下：

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，左下：边缘，右下：FireFox）并排： Example

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

我不确定如何继续这种情况，因为看起来WebKit / Chrome已经决定完全不同地处理扩展，并且这要求对未来的所有扩展方案提出质疑。

有很多文章主张使用像素，因为 CSS参考像素可以很好地处理移动扩展：

然而，这些倾向于忽略字体缩放问题，并将其视为一种不太可能的情况。

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

Chrome是新标准的Busting IE吗？或者我在做一些可怕的错误？我很想在这一点上使用像素来保持一致性。

Answer 1

这是因为Chrome设置了最小字体大小的行为，因此如果缩小，chrome会将最小字体大小设置为6px（中文和日文版本为12px）。因此，div的最小宽度取决于您的基本字体大小（不能小于Chrome的最小值）。

另见：

Chrome will increase the font size when zooming out

[编辑] 其他信息：

Chromium Tickets＆amp;讨论关于这个主题：

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

我首先要通过解决你的结束语来开始我的回答，纯粹是因为它引起了我的注意（除了巨大的赏金之外）。

＆＃34; Chrome是新标准的Busting IE吗？或者我在做一些可怕的错误？我很想在这一点上使用像素来保持一致性。＆＃34;

是和否。我在WebKit浏览器中使用的东西比其他任何主流浏览器引擎都有更多问题，但在调查个别问题后，我一般都发现它是因为WebKit更加严格地遵守W3C提供的规则比其他人。

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

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

等于根元素上'font-size'的计算值。

不幸的是，font-size本身对你的broswer引擎的解释相对开放。

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不接受字体大小调整，而较新版本只接受字体大小调整且仅在启用实验性功能时。< / p>

最后，为了回答您的其余问题，rem和em是一个很好的衡量单位，如果您正在处理实际的文字内容等。请按以下方式思考：

如果您希望<h1>总是比正文h1 { font-size: 1.25rem; }
如果标题栏的高度必须始终是其中{1}}

但是，如果你正在使用一个需要在内部适合特定内容块的容器类型块，那么使用更稳定的东西总是更好。请注意，稳定性并不意味着无响应。

以此为例：

.header { height: 3em; }

这会将元素漂浮在页面中间，同时保持元素的大小适合其中的内容，如果屏幕大小减小到小于.my-element { width: 95%; margin: auto; max-width: 600px; }高度的点，则会相应调整。

简而言之。

是的，Chrome会破坏IE引起嫉妒的程度，但没关系。
是的，很多人都尝试使用相对字体单位作为最好的事情，但是与他们所说的相反，你不需要将它用于所有事情。
您的最终结果应该是响应式网页。根据您拥有的内容，您实现此目标的方式会有所不同。
字体缩放是一个影响因素，如果您担心它会如何影响您的网页，最有可能会出现一段时间，确保只有需要的元素相对于您的字体缩放，将使用您的字体缩放。
＆＃34;我很想在这一点上使用像素来保持一致性。＆＃34; 这在大多数情况下是合乎逻辑的结论，所以去吧：）< / LI>

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/

基于Rem的布局，放大铬是不一致的，PX与REM

3 个答案:

简而言之。