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上的基本字体大小开始缩放。然后，如果你必须进行任何缩放，只需设置基本字体大小，页面的其余部分就行了。

Answer 2

我最终使用的是font-size：10vw。我只是使用后备来纠正缺乏浏览器支持：）

移动与桌面浏览器的字体大小之间的差异

2 个答案: