使用 rem 的 Chrome 和 Firefox 之间的字体大小差异

Question

使用 rem 的 Chrome 和 Firefox 之间的字体大小差异

joh*_*pin 2 html css firefox google-chrome

我正在开发一个网络项目，Bootstrap但在字体大小方面遇到了一些问题。

尝试在 Chrome 中运行此HTML代码片段，然后在 Firefox 中使用iPhone 7 等移动视图运行：

<!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>

Run Code Online (Sandbox Code Playgroud)

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

为何渲染效果如此不同？

Answer 1

los*_*low 5

编辑

这很烦人。

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

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

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

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

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

Run Code Online (Sandbox Code Playgroud)

旧答案

在我的机器上，该代码片段在移动模式下的两个浏览器上的大小相同。

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

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

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

归档时间：	6 年，7 月前
查看次数：	1596 次
最近记录：	6 年，3 月前