我整理了一支非常基本的笔来演示这里发生的事情:https://codepen.io/anon/pen/ZjbmWE
And a screencap for those of you who don't have a Mac
基本上,我想做的是在整个Web应用程序中使用rems进行大小调整,但是即使在两个平台上的Chrome浏览器中查看该应用程序,我也注意到Mac和Windows之间的大小调整不一致。
我看到的是,在设置html { font-size: 50%; }
时,Mac上的计算字体大小最终为9px,而不是我期望的8px(假设默认浏览器大小为16px)。这不会有问题,除了Chrome显然仍使用8px作为计算基于rem的字体大小的基础,而仍使用9px计算基于rem的行高(如我们在笔中所见)。>
如果您检查笔中的<span>
并查看计算出的样式(在Mac上为Chrome),则会注意到字体大小为16px(8 * 2),但行高是18px(9 * 2)。因此,对于rem在字体大小和行高之间的含义,我们有两种不同的解释。
这是一个错误,还是我错过了什么?