任何设备上的适当大小的字体

Question

我目前正在尝试让一个网站在桌面和移动浏览器上显示一些具有适当字体大小的纯文本。由于显示不同，尝试为两者选择字体大小会导致文本在桌面上太大而在移动设备上太小。

我尝试使用媒体查询根据屏幕宽度更改字体大小。

@media screen and (max-width: 900px) {
  body {
    font-size: 2em;
  }
}

这“有效”，但需要注意的是，如果宽度达到或低于 900 像素，在桌面上调整浏览器 window 的大小将导致更改字体大小。我从不希望字体大小动态响应浏览器大小。无论发生任何 window 大小调整，它都应始终保持相同的大小。由于此要求，我不会将 vh 和 vw 视为解决方案。

在四处寻找解决方案时，我发现在媒体查询中使用 dpi 作为替代方法。由于我假设绝大多数移动设备的 dpi 比大多数桌面显示器高，因此这可能是更改移动设备字体大小的好方法。

@media screen and (min-resolution: 150dpi) {
  body {
    font-size: 2em;
  }
}

但是如果真的有超过这个dpi的显示器呢？这适用于我正在测试的 3 台设备，但我不确定它是否适用于更多情况。

总的来说，我的目标是获得类似于维基百科的设置。 https://en.wikipedia.org/wiki/Dots_per_inch 调整浏览器大小时字体大小不会改变，它在移动和桌面浏览器上始终以可读大小显示，我认为它在高 dpi 显示器上也能很好地工作，但我没有测试方法。

那么获得我正在寻找的功能的合适方法是什么？

Answer 1

在写完这个问题后，在发布之前，我一直在寻找解决方案并找到了。其实很简单，但是很容易错过。我希望发布此内容对以后的其他人有所帮助。这一切都归结为 html.

头部的这一行

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Answer 2

您可以使用样式表计算器和以下属性获得调整屏幕大小的平均字体大小：

vh - 视口高度

vw - 视口宽度。

您的字体大小将在您的视图中采用相同的大小，但如果您不处理小尺寸布局，则可能无法阅读。

常规尺码：font-size: calc(.5vh + .8vw);

对于大尺寸：font-size: calc(5vh + 5vw);

Appropriately sized fonts on any device