移动浏览器和桌面浏览器字体大小的区别答案

【问题标题】：Difference between font sizes on mobile vs desktop browser移动浏览器和桌面浏览器字体大小的区别
【发布时间】：2014-05-15 01:28:05
【问题描述】：

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

这是我当前 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">

【问题讨论】：

请不要链接到您的网站。原因如下：meta.stackoverflow.com/questions/125997/…
您不应该在移动设备上设置字体大小。人们可以自己设置。用那个。然后使用 em 和 rem 给盒子一个尺寸。

标签： html css responsive-design

【解决方案1】：

有多种方法可以解决这个问题。当我可以摆脱它（简单的布局，内容驱动的网站）时，我会单独留下1em，让设备确定文本的大小。一切都是从那里缩放的。

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

【讨论】：

【解决方案2】：

我最终改用了 font-size:10vw。我将使用回退来纠正缺乏浏览器支持:)

【讨论】：