Question

是否有一种简单的方法可以根据窗口大小自行调整字体大小？

例如，桌面上的字体看起来比移动设备上的字体大。这样，较小屏幕上的用户就不会占用整个房间的字体。

我尝试使用“px”“em”和“％”，但它们似乎都不起作用。

Answer 1

我发现这样做的最好方法是使用与媒体查询相结合的小技巧。我将body元素的字体大小设置为px中的某些内容（有些人可能会因使用px字体大小而不是em而爆炸，我只是我的个人喜好）。比如说：

body{ font-size: 20px; }

然后我将所有其他元素设置为此body元素的百分比。所以，如果我希望我的h1 s为30px，我将它们设置为：

h1 { font-size: 150%; /* (30/20) * 100 = 150 */ }

但是，将某些元素设置为所有屏幕尺寸的固定字体大小可能是恰当的，例如，您使用的是字形字体，并且希望让您的图标始终保持特定大小以进行对齐。在这种情况下，我将再次使用一组px高度。例如：

.icon { font-size: 15px; }

这意味着不必在不同的屏幕宽度上更改大量不同元素的字体大小，我只需要更改body元素以全局影响所有%大小没有固定px父母的元素。例如：

@media (min-width: 992px){
    body{
        font-size:14px;
    }
}

然后你只有一个元素你真的要担心改变。当然，如果你愿意，这种方法可以轻松地应用于em单位

Answer 2

使用 Javascript 检测屏幕大小，然后更改字体大小和朋友@media标记选项是正确的，但为此您必须指定屏幕大小。但是在javascript中你永远不需要这个，因为它会根据你所有屏幕的修改代码改变字体大小