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

Question

我做了一些网络应用程序,我有一些字体大小的问题.如何在CSS3或javascript中按比例更改字体大小的窗口更改大小？

Answer 1

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

font-size: 4.5vw;

...... 理论上,这应该有效.不幸的是,你会发现,它并没有像预期的那样工作:WebKit浏览器中存在一个错误(至少),其中字体大小的值不是实时更新(尽管它适用于所有其他维度).您需要触发重绘以便更改字体大小,这可以通过z-index从JavaScript 更新属性来完成:

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

这可能会产生一些不稳定性,但这意味着您不必在JavaScript中计算任何实际尺寸,并且您不需要像媒体查询那样使用"阶梯式"尺寸.

Answer 2

这样做的理想方法是在VW字体大小和@media查询之间进行组合.原因是:

1)em本身不会按窗口大小重新缩放

2)vm本身对于低于800px的分辨率/屏幕来说太小了.

因此,实现这一目标的正确方法是:

• 根据所需的屏幕宽度定义VM = 1.0的类 - prop-text
• 添加媒体查询以使字体大小与所需的较低分辨率网格一致.

对于我的响应网格(将1/2列设置为宽度低于768px的100%宽度),它看起来像这样:

<style>
    .prop-text{font-size:1.0vw}
    @media (max-width : 768px) {
    .prop-text{font-size:2.0vw}
    }
    /*other media queries here - fit font size to smartphone resolutions */
</style>

<div class="prop-text">your text is here</div>

Answer 3

设置您的基本字体大小(您body在css中为元素定义的字体大小)px然后在其余页面设置字体大小的任何位置相对于使用em单位的那个,然后您可以使用媒体查询来更改所有页面的字体大小只需更改基本字体,如下所示:

body {
  font-size: 15px;
}
@media (max-width: 1000px) {
  body { font-size: 1.3em; }
}
@media (max-width: 500px) {
  body { font-size: 1.1; }
}

Answer 4

你有 3 种方法来做到这一点：

1. 使用http://fittextjs.com/，但页面可能开始变慢
2. 使用媒体查询
3. 使用 em

现在，这取决于你想成为你的最终结果。我会选择选项 3。