javascript - 如何在 CSS3 或 javascript 中按比例更改字体大小以更改窗口大小

Question

我在做一些网络应用程序时遇到了一些字体大小的问题。如何在 CSS3 或 javascript 中按比例更改 font-size 以更改窗口大小？

Answer 1

执行此操作的理想方法是使用 vw 单位，它被定义为 视口(viewport)宽度 的 1/100(因此得名)。因此，例如，如果您希望文本始终占浏览器宽度的 4.5%，则可以使用以下大小:

font-size: 4.5vw;

……理论上，这应该可行。不幸的是，您会发现它并没有完全按预期工作:WebKit 浏览器中存在一个错误(至少)，其中字体大小的值不是实时更新的(尽管它适用于所有其他尺寸)。您需要触发重绘才能更改字体大小，这可以通过从 JavaScript 更新 z-index 属性来完成:

window.addEventListener('resize', function(){
    document.getElementById('myEl').style.zIndex = '1';
}, false);

这可能会造成一点不连贯，但这意味着您不必在 JavaScript 中计算任何实际尺寸，也不需要像媒体查询那样使用“阶梯式”尺寸。