在chrome中使用REM,无法重现错误

时间:2014-02-27 22:36:08

标签: css google-chrome screen-resolution em

正如标题所说,我正在尝试使用REMS,在页面的所有元素上使用旧版浏览器的px后退,而不仅仅是字体。测试网站是:test.glow-sticks.org

如果下面的任何术语不正确,我很抱歉,我远非专家!

在超过1024的分辨率下,使用(hss in css)的字体大小设置为62.5%,简单地说是1rem = 10px,在此分辨率下我得到的默认字体为1.4rem / 14px

在超过1680的分辨率下,html css设置为71.4%,通过设置这个百分比,字体从14px变为16px,当然所有元素都增加相同的百分比,这非常酷,似乎保持一切完美同步。

在我的计算机上,这似乎完美无缺,就像我一直在使用的许多其他测试平台上一样。然而,我的网站开发人员似乎在她的机器上遇到了问题,但只是在chrome中。 (firefox和IE不受影响)

在她的机器上,当她将分辨率降低到1024(从她的原生1920年)分辨率时,网站正在加载水平滚动条,当我的机器上它在1024上完全适合。 使用chrome检查元素工具时,它会变得更有趣。我一直在检查一个DIV,特别是Div id =整页,当在1024屏幕上观看时,它应该是960px宽,当在1680+上观看它应该是1097px宽。

然而,在她的Chrome上,div = wholepage在1024分辨率上显示1152px,在她的原始1920分辨率上显示1152px。

我注意到在我的Chrome版本上,我必须将font-size设置为75%才能重现相同的效果。似乎无论我将font-size设置为整页,div仍然希望是1152px。我甚至尝试了10%,这完全正确地在我的铬合金上,使一切都很小,但在她的机器上没有任何变化。唯一确实改变的是字体大小确实说10%,但它好像没有得到尊重,而且它被覆盖了至少75%。

有人可以复制吗?

她能想出的唯一解决方案是使用更高的百分比,如90%和103%,提供与62.5和71.4相同的增加,但是保持它如此1 rem = 10px似乎更好,这就是我想要的原因以62.5为基础。

1 个答案:

答案 0 :(得分:2)

没关系,我已经能够通过将chrome minimum-font-size设置为12px或更高来重现错误。在我的设置中,它设置为6px,这就是为什么一切都在我的版本上正常加载。

16px是chrome的默认大小,12px可能是chrome的默认最小字体大小,这解释了为什么我的Web开发人员只能将字体大小降低到75%。我也注意到-webkit-text-size-adjust:none;不再有效,这是可以理解的!