1

我发现以下基于视口大小调整文本大小的 JS 解决方案非常优雅：

https://stackoverflow.com/a/10295733/1318135

onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}

但是，有两个问题：

  1. 它依赖于调整大小的视口。我也想在页面首次加载时触发它，但我是 JS 的新手。

  2. 我的页面完全使用 em 值编码；这使用 px。我如何使用它来调整默认的 em 大小，然后它会自动渗透到页面上的每个其他元素？

http://jsfiddle.net/hFNc7/

谢谢！

4

2 回答 2

1

  1. 查看其他答案（或将http://jsfiddle.net/cjzEK/1/放在页面底部）

  2. em 本身并不是一个大小。这是一个百分比不同的写法。em 为您工作的唯一方法是因为在浏览器中设置了 1 个基本字体大小（或者也可能是重置样式表）。浏览器中通常的基本字体大小是 16px。所以这个解决方案所做的是通过将其添加到正文来更改基本大小（将其添加到 html 可能会更好）。

例如p{font-size:1em;}，没有任何重置将是 16px。1.5em 将是 24px。

于 2012-08-03T16:01:52.197 回答
1

您需要在body'sload事件中运行该代码。最简单的方法是直接通过其onload属性设置它：

<body onload="var f = function () { document.body.style.fontSize = 0.2 * window.innerWidth + 'px'; }; window.onresize = f; f();">

它能做什么：

  1. 创建一个能够动态设置字体大小的函数。
  2. 将函数设置为resize事件侦听器。
  3. 立即执行该功能。

PS：有更优雅的方式来写这个，但既然你是新的，最好从一个更简单的符号开始。

于 2012-08-03T15:59:54.683 回答