Question

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

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

可以使用CSS＆amp;仅限HTML？如果是这样的话？

由于

Answer 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在CSS中设置wordwrapping，如果需要，word-wrap:break-word

移动网站字体大小和包装

1 个答案: