html - 移动网站字体大小和换行

Question

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

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

可以仅使用 CSS 和 HTML 来完成吗？如果是怎么办？

谢谢

Answer 1

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

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

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

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;
}

在 CSS 中使用 white-space: normal 设置自动换行，如果需要，还可以使用 word-wrap:break-word