Question

我现在正在学习自适应和响应式设计，以便稍后将其应用于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

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

更新哦，我在中兴Open C和Alcatel One Touch Fire E上试过它。该平台是Firefox OS 1.3

Answer 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％的大小显示。

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

1 个答案: