我正在使用 Bootstrap 从事一个网络元素我在字体大小方面遇到了一些麻烦。
尝试运行此HTML在 Chrome 中，然后在 Firefox 中使用 移动 View (例如 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>你会看到，在 Firefox 移动 View 中，字体大小比在 chrome 下大得多。但是我很好地初始化了 <html> 的字体大小到像素值(这里是 40px)，然后我只使用 rem有字体大小值( Bootstrap 也使用 rem 值作为字体大小)。
为什么渲染效果如此不同？
最佳答案
编辑
这很烦人。
在 Firefox 上，40px = 40 桌面大小的像素，不尊重您的模拟设备。
不确定 Chrome 的作用，但在设置为 iPhone 6(1920px) 的 667px 窗口中，40px = ~17px。
响应式设计可以缓解这些问题。
如果响应式设计不可行，请根据 vh 设置字体大小，而不是 px。
html {
font-size: 10vh;
font-size-adjust: none;
}
旧答案
在我的机器上，代码片段在移动模式下的两个浏览器上的大小相同。
您更改了缩放系数吗？这将改变 rem/em 的大小。
您的操作系统的 DPI 设置也可能会改变这一点。
为了保持大小一致，请使用响应式设计，例如 flexbox 和 % css 单元。
关于html - 使用 rem 的 Chrome 和 Firefox 之间的字体大小差异，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57279199/