移动网站字体大小和换行答案

【问题标题】：Mobile website font sizing and wrapping移动网站字体大小和换行
【发布时间】：2011-11-14 00:11:13
【问题描述】：

我有一个简单的静态网站，里面有几行文字。

只能从移动设备访问，我希望文本的字体大小为屏幕高度的 1/3，并根据屏幕宽度自动换行。

只能使用 CSS 和 HTML 来完成吗？如果有怎么办？

谢谢

【问题讨论】：

标签： html css mobile-website

【解决方案1】：

简单的答案是以编程方式提供基于移动设备的样式表。您可以在 CSS 文件中使用：

@media screen and (max-device-width: 480px) {
  font-size: 160px; /* 1/3 max screen height */
}

或者，您可以使用 javascript 计算视口的宽度和高度，然后动态设置样式。

window.onload = function() {
  var viewportwidth;
  var viewportheight;

  if (typeof window.innerWidth != 'undefined') {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
  } else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0) {
      viewportwidth = document.documentElement.clientWidth,
      viewportheight = document.documentElement.clientHeight
  } else {
      viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
      viewportheight = document.getElementsByTagName('body')[0].clientHeight
  }
  document.body.style.fontSize = viewportheight / 3;
}

使用white-space: normal 和word-wrap:break-word 在CSS 中设置自动换行

【讨论】：

抱歉打错字了。有时我太着急了。现在更正。
由于某种原因，“Body”下的所有字体现在都具有相同的大小，即使在某些类中我将它们设置为父级的 30%。任何想法如何解决这个问题？
这是一个继承问题。最安全的方法是永远不要期望正确继承一个元素。如果你的 body 字体大小是 160 像素（我相信这是你最初问的时候想要的——所有副本都是屏幕的 1/3），你可以明确地将你的元素设置为 38 像素（30%）。使用 CSS，期待意外。