3

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

如果以下任何术语不正确,我深表歉意,我远非专家!

在超过 1024 的分辨率上,使用 (html 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=wholepage,在 1024 屏幕上查看时它应该是 960px 宽,在 1680+ 上查看时它应该是 1097px 宽。

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

我注意到在我的 Chrome 版本上,我必须将字体大小设置为 75% 才能重现相同的内容。似乎无论我将字体大小设置为整页 div 还是希望为 1152px。我什至尝试了 10%,这在我的 chrome 上非常正确,使一切变得很小,但在她的机器上没有任何变化。唯一改变的是 font-size 确实说 10%,但它好像没有被尊重,并且被至少 75% 覆盖。

请问谁能重现这个?

她能想出的唯一解决办法是使用更高的百分比,比如 90% 和 103%,这提供了与 62.5 和 71.4 相同的增加,但是保持它看起来更好,所以 1 rem = 10px,这就是我想保持这个的原因62.5为基础。

4

1 回答 1

3

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

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

于 2014-02-27T23:32:18.527 回答