使用rem的chrome和firefox之间的字体大小差异答案

【问题标题】：font-size difference between chrome and firefox using rem使用rem的chrome和firefox之间的字体大小差异
【发布时间】：2019-12-08 06:58:43
【问题描述】：

我使用Bootstrap 处理一个网络项目，但我在字体大小方面遇到了一些问题。

尝试在 chrome 中运行此HTML sn-p，然后在具有 移动视图（如 iPhone 7）的 Firefox 中运行：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        html {
            font-size: 40px;
            font-size-adjust: none;
        }

        h1 {
            font-size: 2rem;
        }
    </style>

</head>

<body>

    <div>
        <h1>
            test
        </h1>
    </div>

    <button type="button" class="btn btn-primary">Send</button>

</body>

</html>

您会看到，在 Firefox 移动视图中，字体大小比在 chrome 下大得多。但是，我将<html> 的字体大小初始化为像素值（此处为40px），然后我只使用rem 具有字体大小值（引导程序也使用rem 值作为字体大小）。

为什么渲染效果如此不同？

【问题讨论】：

标签： html css google-chrome firefox

【解决方案1】：

编辑

这很烦人。

在 Firefox 上，40px = 40 个桌面大小的像素，不尊重您的模拟设备。

不确定 Chrome 的作用，但在 667px 窗口中设置为 iPhone 6(1920px)，40px = ~17px。

响应式设计可以缓解这些问题。

如果响应式设计不可行，请根据 vh 而不是 px 设置字体大小。

        html {
            font-size: 10vh;
            font-size-adjust: none;
        }

旧答案

在我的机器上，移动模式下两个浏览器的 sn-p 大小相同。

您是否更改了缩放系数？这将改变 rem/em 的大小。

您的操作系统的 DPI 设置也可能会改变这一点。

为了保持一致的大小，请使用响应式设计，例如弹性盒子和 % css 单位。

【讨论】：

您是否尝试过外部 .html 文件中的代码，而不仅仅是 Stackoverflow sn-p ？缩放系数没有改变
嗯，好吧，这对模拟器来说是一个令人惊讶的行为。可以报bug吗？