如何在 FirefoxOS 浏览器中管理不同的标准字体大小？答案

【问题标题】：How to manage varying standard font size in FirefoxOS browser?如何在 FirefoxOS 浏览器中管理不同的标准字体大小？
【发布时间】：2014-10-23 06:48:38
【问题描述】：

我现在正在学习自适应和响应式设计，以便以后将其应用于 Firefox Os Web Apps。我从简单的 HTML 页面开始。我的想法是让设计响应浏览器的标准字体大小，以便我的应用程序与实际分辨率无关。但我观察到一个奇怪的行为：标准字体大小取决于页面包含多少内容。

为了说明这一点，我准备了以下两个示例

<!DOCTYPE html>
<html>
  <head><meta charset="utf-8" /><title>Unnamed</title></head>
  <body>
    <h1>A heading</h1>
    <p>much more text. Bla blabla blablabla. Bla blabla blablabla. Bla blabla
      blablabla Bla blabla blablabla. Bla blabla blablabla. Bla blabla blablabla.
      Bla blabla blablabla [...]
    </p>
  </body>
</html>

和

<!DOCTYPE html>
<html>
  <head><meta charset="utf-8" /><title>Unnamed</title></head>
  <body>
    <h1>A heading</h1>
    <p>view text.
    </p>
  </body>
</html>

这就是浏览器显示的内容

http://i.stack.imgur.com/UxMFP.png

http://i.stack.imgur.com/LAMC9.png

我的问题：这些差异的原因是什么？如何使微小的文本版本显示常规、可读的大小？

更新： 哦，我在ZTE Open C和Alcatel One Touch Fire E上试过了，平台是Firefox OS 1.3

【问题讨论】：

标签： responsive-design font-size firefox-os

【解决方案1】：

不同的是缩放级别，缩放级别会根据页面上的内容量进行调整。为此，您可以使用以下元标记：

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

在 Firefox OS 中处理字体大小的另一个技巧。添加以下 CSS 以设置基本字体大小：

html, body {
  font: 10px sans-serif;
}

现在您可以设置rem中每个元素的字体大小（1 rem = 10px）：

#someElement {
  font-size: 1.5rem;
  width: 4rem; /* also works on other properties */
}

一切就绪。现在它的美妙之处在于，在更大的设备上，如果您想扩大设计规模，您可以通过 JavaScript 实现：

document.documentElement.style.fontSize = '12px';

所有元素都以 120% 的大小显示。

【讨论】：