基于Rem的布局，铬的缩放不一致，PX与REM [英] Rem-Based Layouts, Zooming on chrome is inconsistent, PX vs REM
问题描述
我一直在为此绞尽脑汁，谷歌搜索实际上并没有太多帮助，甚至没有文档记录这个问题，但是这极大地影响了我目前向移动友好型设计的转化。
无论走到哪里，每个人都在兜售基于 rem 的版面设计作为新的黄金标准，从表面上看，这样做的好处这种方法似乎是理想的（完全可访问性支持基于参考像素的缩放和字体大小缩放，以支持许多DPI和许多屏幕尺寸/设置）。
但是我已经运行了陷入很大的障碍，我发现Chrome（可能是所有Webkit浏览器，但我没有要测试的Mac Atm）似乎与其他产品的规模不一样。
具有如下初始设置：
html {font-size ：62.5％; }
body {font-size：1.6rem; }
我们应该能够使用rems像素大小的1/10来设置所有测量值：
.my-element {高度：15rem; } / * 150px * /
我创建了一个简单的示例来说明我的问题：
但是，这些往往会忽略字体缩放问题，并认为这不太可能
我快速浏览了大型移动友好网站，我可以从大型&成功的公司，似乎大多数公司都只使用像素来满足其所有布局需求。 （Google，Facebook，Wordpress，Twitter，Bootstrap 3，[在某种程度上是Bootstrap 4]， MDN 和 WebPlatform ）
Chrome是新标准的IE浏览器？还是我做错了什么？我很想在这一点上只使用像素来保持一致性。
这是因为Chrome浏览器设置了最小字体大小的行为，因此，如果缩小，chrome会将最小字体大小设置为6px（中文和日文版本为12px）。因此，您的 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
I've been wracking my brain over this one, google searches don't really have much in the way of help or even documentation of this problem but it's greatly affecting my current conversion to a mobile-friendly design.
Everywhere I go, everyone's touting using rem-based layouts as the new gold standard, and on the surface the virtues of this approach seem ideal (full accesibility support for both reference pixel based scaling and font-size scaling to support many DPIs and many screen sizes / settings).
However I've run into a rather large snag, I'm finding that Chrome (and possibly all webkit browsers but I don't have a mac atm to test) don't seem to scale the same as the rest.
With the initial setup like this:
html { font-size: 62.5%; }
body { font-size: 1.6rem; }
We should be able to set up all our measurements using 1/10th the pixel size in rems:
.my-element { height: 15rem; } /* 150px */
I've created a simple example that illustrates my problem here: https://jsfiddle.net/gLkpz88q/2/embedded/result/
When you use Chrome and you scale this way out, notice how the layout stops scaling but the content continues.
Compare this to Firefox, IE11, Edge and you don't see this behavior at all, they all scale uniformly and continually.
Here's (Top-Left: Chrome, Top-Right: IE11, Bottom-Left: Edge, Bottom-Right: FireFox) side-by-side:
As you can see this has some terrible implications for layouts if the rem unit scales differently than everything else.
I'm not certain how to proceed with this scenario as it seems like WebKit/Chrome have decided to handle scaling completely differently and this calls in to question all the scaling scenarios going forward.
There's a number of articles advocating just using pixels as the CSS Reference Pixel takes care of mobile scaling rather well:
However these tend to ignore the font-scaling issue, citing it as an unlikely situation.
I did a quick look around at man big mobile friendly/friendlyish sites I could think of from large & successful companies and it seems most of them just use pixels for all their layout needs. (Google, Facebook, Wordpress, Twitter, Bootstrap 3, [and to some extent Bootstrap 4], MDN, and WebPlatform)
Is Chrome the new Standards-Busting IE? Or am I doing something horribly wrong? I'm tempted to just use pixels at this point for consistency.
That's because Chrome's behavior of setting a minimum font-size, so if you zoom-out, chrome will set the minimum font-size to 6px (12px for chinese and japanese version). So your div will have a minimum width as it depends on your base font-size (which can't be smaller then chrome's minimum).
See also:
Chrome will increase the font size when zooming out
[Edit] Additional Information:
Chromium Tickets & Discussions On this topic:
https://bugs.chromium.org/p/chromium/issues/detail?id=16875 https://bugs.chromium.org/p/chromium/issues/detail?id=36429
-webkit-text-size-adjust Support Dropped, so the viable solution for this behavior is not reliable anymore:
https://trac.webkit.org/changeset/145168/webkit
这篇关于基于Rem的布局，铬的缩放不一致，PX与REM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
