javascript - js中根据分辨率计算字体大小

Question

如何更改网站的字体大小以适应每个屏幕分辨率。我已经对此进行了搜索，但仍然无法获得所需的结果。所以请让我知道可以使用java脚本根据分辨率计算字体大小的准确公式。提前致谢

Answer 1

尝试将字体放在 em 或百分比中。默认浏览器字体大小为 16 像素。您可以通过设置正文字体大小将文档正文字体大小 10px 更改为基本字体62.5% = (10/16)*(100)

现在，

1em = 10px
100% = 10px

Answer 2

你说的是这个概念吗？

如果你是，这是 css 唯一的概念证明：

html { font-size: 62.5%; }
body { font-size: 1em;}

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

Answer 3

我不确定您要寻找什么尺寸，但这会让您进入球场。你在寻找这样的东西吗？

var fontSize = Math.round((12/window.innerWidth)*1200);
document.body.style.fontSize = fontSize+'px';

对于这些窗口宽度，您将看到类似这样的内容...

480 = 30
768 = 19
1024 = 14
1200 = 12

您可能需要设置一个最小值，以便在大屏幕上字体不会很小。