基于Rem的布局,放大铬是不一致的,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,左下:边缘,右下:FireFox)并排:

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

我不确定如何继续这种情况,因为似乎WebKit/Chrome决定以完全不同的方式处理扩展,并且这要求对未来的所有扩展方案提出质疑.

有很多文章主张使用像素,因为CSS Reference Pixel可以很好地处理移动扩展:

• 只需使用像素
• RIP Rem,Viva CSS参考像素!

然而,这些倾向于忽略字体缩放问题,并将其视为不太可能发生的情况.

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

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

Answer 1

这是因为Chrome设置了最小字体大小的行为,因此如果缩小,chrome会将最小字体大小设置为6px(中文和日文版本为12px).所以你div的最小宽度取决于你的基本字体大小(不能小于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

Answer 2

我将首先通过解决你的结束语来开始我的回答,纯粹是因为它引起了我的注意(除了巨大的赏金).

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

是的,不是.我在WebKit浏览器中工作的问题比我在任何其他主流浏览器引擎中都有问题,但在调查个别问题之后,我发现这是因为WebKit比其他人更倾向于坚持W3C提供的规则.

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

为了将上述陈述扩展到你的问题的其余部分,我浏览了W3C文档中有关相对字体长度的内容.在rem单位的标题下,你会注意到第一行说明:

等于根元素上'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不接受字体大小调整,而较新版本只接受字体大小调整,并且仅在启用实验功能时才接受.

最后,要回答你的问题的休息,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引起嫉妒的程度,但这没关系.
• 是的,很多人都试图使用相对字体单位作为最好的事情,但是与他们所说的相反,你不需要将它用于所有事情.
• 您的最终结果应该是响应式网页.您实现此目标的方法将根据您拥有的内容而有所不同.
• 字体缩放是一个影响因素,很可能会出现一段时间,如果您担心它会如何影响您的网页,请确保只需要根据您的字体缩放的元素,你的字体.
• "我很想在这一点上使用像素来保持一致性." 在大多数情况下这是合乎逻辑的结论,所以去吧:)