html - 移动浏览器与桌面浏览器字体大小的区别

Question

我还没有尝试阅读有关使字体大小具有响应性以及有关为移动浏览器使用设备宽度的内容。但我似乎无法理解它。与窗口成比例的字体大小在移动浏览器和桌面浏览器之间有很大不同。我该如何解决这个问题？

这是我当前的 h1 CSS:

h1 {
font-size: 3em;
}

@media (min-width: 520px) {

h1 {
    font-size: 3.5em;
}
}

@media (min-width: 760px) {
h1 {
    font-size: 4em;
}
}

@media (min-width: 960px) {
h1 {
    font-size: 5em;
}
}

是的，我已经包含了这个:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Answer 1

有多种方法可以解决这个问题。当我可以摆脱它(简单的布局，内容驱动的网站)时，我不理会 1em，让设备确定文本应该适合它的大小。一切都从那里扩展。

由于 em 是相对测量值，因此您不应该为每个设备宽度设置不同的标题大小。将标题设置为 2em 或您想要的任何位置，然后让它从 body 上的基本字体大小开始缩放。然后，如果您必须进行任何缩放，只需设置基本字体大小，页面的其余部分就会对齐。