您可以根据浏览器窗口使 font-size 属性可缩放吗？

Question

这是我以前从未遇到过的。是否可以根据浏览器的窗口大小制作字体比例。例如：使字体大小为可用宽度的 100%。我对 Javascript、jQuery 或 CSS 解决方案持开放态度。

Answer 1

“字体大小为可用宽度的 100%”是什么意思？您的字体大小（以像素为单位）是否等于页面的宽度（以像素为单位），或者某些文本会填满页面的宽度？

第一种情况：字体大小等于页面宽度

如果你可以使用JavaScript，你可以监听窗口大小改变事件，然后在每次改变窗口大小时改变字体大小。你可以用纯 JavaScript 或 JQuery 来做，无论你熟悉什么。

第二种情况：文本宽度等于页面宽度

这很难实现，因为不同的浏览器有不同的布局选项，也受每个用户的可访问性设置的影响。您可以尝试调整<div/> 内的字体大小，测量<div/> 的宽度并重新调整字体大小，直到获得所需的宽度。

当然，至少你有几天的时间来优化这个东西，这会产生糟糕的视觉效果。要减少它，您可以调整背景上的文本（不可见文本），找到所需的字体大小/宽度，然后将其应用于可见块。

Answer 2

我不明白你为什么不能。只需为窗口调整大小事件创建一个 JS 处理程序，并在处理程序函数中更改目标元素的 style.fontSize 属性。所以，像：

window.onresize = function(event) {
    document.getElementById('targ').style.fontSize='10';
}