Question

我做了一些网络应用，我对 font-size 有一些问题。如何在CSS3或javascript中按比例更改 font-size 窗口的更改大小？

Answer 1

执行此操作的理想方法是使用vw单位，该单位定义为视口宽度的1/100（因此名称）。因此，例如，如果您希望文本始终为浏览器宽度的4.5％，则可以使用大小：

font-size: 4.5vw;

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

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

这可能会产生一些不稳定性，但这意味着您不必在JavaScript中计算任何实际尺寸，也不需要像媒体查询一样使用“阶梯式”尺寸。

Answer 2

在body中设置基本字体大小（您在css中为px元素定义的字体大小），然后在页面的其余部分设置相对于使用{{1}的字体大小的字体大小单位，然后您可以使用媒体查询通过更改基本字体来更改所有页面的字体大小，如下所示：

em

Answer 3

这样做的理想方法是在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 4

您有3种方法可以做到：

使用http://fittextjs.com/，但页面可能会开始变慢
使用媒体查询
使用ems

现在，这取决于你想要的最终结果。我会去选3号。

Answer 5

我认为最好的方法可能是 vh ，因为 font-size 会更改文本的高度。使用 vh 意味着即使用户调整页面大小或屏幕显示文字，文本也将始终减小页面的大小。小。

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

5 个答案: